Блог

Главная - Вопросы по программированию - Преобразование innerText в innerHTML после некоторых изменений текста

Преобразование innerText в innerHTML после некоторых изменений текста

#javascript #html #google-chrome-extension

#javascript #HTML #google-chrome-расширение

Вопрос:

Я просматриваю свой innerHTML, чтобы найти индекс определенной строки, чтобы я мог добавить к ней теги стиля и выделить ее — Для этого я использую что-то вроде:

 i = htmlText.indexOf(lcSearchTerm, i 1);

Проблема в том, что, если мой lcSearchTerm:

 "Find word"

Но если в innerHTML это как:

 "<span> Find </span> word"

Я не найду индекс строки, поскольку он не найдет строку, которую мы ищем).

Итак, моя идея заключалась в том, чтобы найти его во внутреннем тексте внутри и выделить его там. Проблема в том, что после этого мне нужно преобразовать его обратно в innerHTML, чтобы обновить страницу с изменениями. Я должен быть чем-то вроде:

 innerText = "Find word"
innerText = Stylize(innerText)
innerText = "<font style='color:blue; background-color:yellow;'> Find word </font>"

innerHTML = TextToHTML(innerText);
innerHTML = "<body> 
                 <div> 
                     <font style='color:blue; background-color:yellow;'> Find word </font> 
                 </div> 
             </body>"

Есть идеи о том, как я могу это сделать?

Ответ №1:

Вы можете попробовать удалить теги, создав функцию:

 function strip_html_tags(str) {
  if ((str === null) || (str === '')) {
    return '';
  }

  return str.toString().replace(/<[^>]*>/g, '');
}

i = strip_html_tags(htmlText).indexOf(lcSearchTerm, i 1);

Комментарии:

1. Спасибо, но я немного запутался. Разве это не удаление тегов в searchTerm? У поискового запроса никогда не было тегов для начала

2. Извините за это, это должно быть то, htmlText что нужно передать strip_html_tags функции.

Ответ №2:

Предполагая, что вы выделяете слова в элементе с идентификатором container 

 const el = document.getElementById('container');
el.innerHTML = el.innerHTML.replace(/searchterm/g,(w) => `<font>${w}</font>`)