Javascript str.split на двоеточие char и добавить разрыв строки

Question

Я чувствую себя немного тупым здесь. Я пытаюсь добавить разрыв строки после двоеточия в строке, например:

LOCATION: SOME OTHER WORDS AFTER

Я бы хотел, чтобы он стал

LOCATION:
SOME OTHER WORDS AFTER 

Мой метод вызывается из Vue l oop, это:

handleName(name) {
  if (name.includes(":")) {
    return name.replace(":", ":\n");
  } else {
    return name;
  }
}

// the above simply adds a line in the name var but does not actually render an HTML <br>
// I tried using name.split(':'), but for some reason it splits the sting by individual letters.

Может быть, потому что он вызывается из Vue как {{ handleName(location.name) }} Я должен обрабатывать это по-другому?

Answer 1

Вам необходимо:

1. Убедитесь, что вы вставили HTML перенос строки (<br>) вместо символа новой строки (\n). За исключением внутри указанных c тегов, таких как <pre>, HTML по умолчанию сворачивает пробелы, и новая строка не будет отображаться как новая строка.

2. Убедитесь, что вы передать результат операции замены в средство визуализации как HTML, а не как текст. При передаче в виде текста средство визуализации заменяет символы меньше (<) и больше (>) в тегах <br> на их эквивалентные объекты (< и >).

В VueJS вы можете использовать директиву v-html для этого:

<span v-html="name.replace(/:\s*/g, '<br>')"></span>

---

^{(! ) Будьте осторожны при выводе пользовательского контента в формате raw HTML. Возможно, вы открываете себя для уязвимостей XSS (и связанных с ними). ​​}

Answer 2

Вы должны использовать тег <br/> вместо \n:

handleName(name) {
  if (name.includes(":")) {
    return name.replace(":", ":<br/>");
  } else {
    return name;
  }
}

Пример в Vue. JS, используя директиву v-html для отображения String как разметки:

<template>
    <span v-html="message"></span>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      message: "LOCATION: SOME OTHER WORDS AFTER".replace(":",":<br/>")
    }    
  },
};
</script>

Answer 3

В следующей демонстрации представлена ​​функция, которая разбивает текст после двоеточия в заданной строке. Эта функция визуализирует текст в HTML или возвращает отредактированный текст как строковое значение для использования в другом месте.

/** 
 * colonBreak(data, DOM = false)
 =------------------------------=
 * Edit text in a particular format pattern:
 *   Insert a line break after any colon.
 =------------------------------------------=
 * @param {string} data - There are two forms of strings that can be accepted:
 *                        1. a literal string or template literal 
 *                        2. the selector of a DOM element that has the text 
 * @param {boolean} DOM - If undefined it defaults to false 
 *                        true:  data represents the selector of a DOM element
 *                               text of DOM element will be formatted
 *                        false: data is the string to be formatted
 =----------------------------------------------------------------------------=
 * @return {string}       if DOM is false, a formatted string will be returned. 
 *            or 
 *         {undefined}    if DOM is true, undefined will be returned and the DOM 
 *                        element text content will be formatted
 */ 

---

Объяснение

При работе с текстом элементов DOM , HTML форматирует текст по умолчанию, чтобы нормализовать несколько пробелов и разрывов строк. Свойство .innerText используется для сохранения пробелов и переносов строк (\n не игнорируется). .innerText или .textContent можно использовать для извлечения текста, но важно применить .innerText для визуализации отформатированной строки обратно в элемент DOM.

string = node.innerText;

Сердце этой функции состоит из .split() метод witch разбивает строку с помощью разделителя RegExp на массив строк:

string.split(/([\w]+:)\s*/)...

Инструкции для разделителя RegExp следующие:

1. ( ... ) захватить совпадение в скобках и использовать его в качестве замены
2. [ ... ] сопоставить литералу и / или классу каждого символа и / или мета- символ
3. \w метасимвол, который соответствует любому буквенно-цифровому символу c (включая подчеркивания)
4. + квантификатор, указывающий совпадение один или более последовательных экземпляров предшествующего ему совпадения
5. : буквенное двоеточие
6. \s метасимвол, который соответствует пробелу
7. * квантификатор как + но соответствует ноль или больше

Answer 4

Чтобы избежать путаницы. Можно использовать \n в строке, span или что-то еще.

НО это работает, если вы назначите его innerText. Если вы или все, что вы используете, используете innerHTML, это не будет работать должным образом (см. Пример).

function handleName(string) {
  return string.replace(":", ":\n");
}

let div = document.getElementById('div');
let div2 = document.getElementById('div2')
let name = handleName(div.innerText);
div.innerText = name;
div2.innerHTML = name;

div{
  margin-bottom: 10px;
}

<div id='div'>LOCATION: SOME OTHER WORDS AFTER</div>
<div id='div2'></div>

Answer 5

Нормальные разрывы строк, такие как \n, отображаются в виде пробела в html. Чтобы фактически отобразить разрыв строки, вы можете использовать элемент <br>. Также вам не нужно проверять, есть ли в строке двоеточие. Вы можете смело пытаться заменить его, даже если он не существует.

handleName(name) {
    return name.replace(":", ":<br/>");
}