Как я могу изолировать подстроки, завернутые в теги разметки?

#javascript #html #string #algorithm #react-native

Вопрос:

Может ли кто-нибудь предложить простой* способ сделать следующее?

 "this is lt;markgt;just anlt;/markgt; example lt;markgt;snippetlt;/markgt;"

Для

 ["this is", "lt;markgt;just anlt;/markgt;", "example", "lt;markgt;snippetlt;/markgt;" ]

Спасибо за ответ, ребята

этот фрагмент ниже также охватывает теги с атрибутами

 "lt;b class="highlight"gt;Paradiselt;/bgt; Lost" .split(/(lt;w s (?!term).*?gt;.*?().*?lt;/[a-zA-Z]*gt;)/g) .filter((i) =gt; i)

1. просто отредактировал вопрос, пожалуйста, взгляните. @Бармар

2. Используйте split() с регулярным выражением, которое соответствует lt;markgt;...lt;/markgt; . Поместите это в группу захвата, чтобы разделитель был включен в результат.

3. Не забудьте сделать его не жадным.

4. @Barmar Можете ли вы дать фрагмент кода?

5. Я сказал тебе все, что тебе нужно сделать. Если вы не понимаете, прочитайте документацию, чтобы узнать больше.

Ответ №1:

Разделение с использованием регулярных выражений, но с учетом всех HTML-тегов и веб-компонентов с атрибутами, а не только lt;markgt; .

 function splitHTML (inputString) {  return inputString  .split(/(lt;[a-zA-Z-](?!term).*?gt;.*?().*?lt;/[a-zA-Z-]*gt;)/g)  .filter((i) =gt; i); }  console.log(splitHTML('this is lt;markgt;just anlt;/markgt; example lt;markgt;snippetlt;/markgt;'));

Приведенный выше код будет работать для:

lt;markgt;textlt;/markgt;
lt;my-tooltipgt;web componentlt;/my-tooptipgt;
lt;mark class="red"gt;colored textlt;/markgt;

1. не удается для этого «lt;b класс=»выделить»gt;Райlt;b класс=»выделить»gt;lt;/bgt; Потеряно»

2. Приведенное ниже также подходит для оставшегося случая "lt;b class="highlight"gt;Paradiselt;/bgt; Lost".split(/(lt;w s (?!term).*?gt;.*?().*?lt;/[a-zA-Z]*gt;)/g) .filter((i) =gt; i)

3. @MuhammadAshraf Спасибо, что поделился! Я немного изменил ваше регулярное выражение и обновил свой ответ

4. Вы также можете добавить .map((i) =gt; i.trim()) «после .filter((i) =gt; i) «, чтобы удалить пробелы по бокам. Я не включил это в приведенный выше код, так как он не был запрошен в вопросе.

Ответ №2:

Просто разделите регулярным выражением, это даст вам несколько пустых элементов.. после этого вы можете отфильтровать пустые элементы.

 let a = "this is lt;markgt;just anlt;/markgt; example lt;markgt;snippetlt;/markgt;"; let x = a.split(/( lt;markgt;.*?().*?lt;/markgt;)/g); // ['one', '.two', '.three']; console.log(x.filter( (el) =gt;el) );

Ответ №3:

 function splitHTML (inputString) {  const result = [];    // 1. Replace a HTML tag with ###lt;markgt; and lt;/markgt;###  inputString = inputString.replaceAll('lt;mark', '###lt;mark');  inputString = inputString.replaceAll('lt;/markgt;', 'lt;/markgt;###');    // 2. Split on the newly added sign  inputString = inputString.split('###');    // 3. Filter out empty lines and return the result  return inputString.filter((a) =gt; a); }  console.log(splitHTML('this is lt;markgt;just anlt;/markgt; example lt;markgt;snippetlt;/markgt;')); // =gt; ['this is ', 'lt;markgt;just anlt;/markgt;', ' example ', 'lt;markgt;snippetlt;/markgt;']

Ответ №4:

Попробуйте использовать заменить все, это сработает….

 lt;input type="text" id="text" style="width:500px; max-width: 500px;"/gt;  lt;scriptgt;  const value = "this is lt;markgt;just anlt;/markgt; example lt;markgt;snippetlt;/markgt;";  var result = "[""   value.replaceAll(" lt;markgt;", "", "lt;markgt;").replaceAll("lt;/markgt; ", "lt;/markgt;" , "")   ""]";  document.getElementById("text").value = result;  lt;/scriptgt;

1. Я думаю, что им нужен массив, а не строка.

2. @Barmar Нет такого упоминания о том, что ему нужен массив, если ему нужен массив, то он может просто разделить его с помощью coma (,) после удаления скобок []

3. Вокруг желаемого результата нет кавычек.