Привет, ребята.


Может ли кто-нибудь помочь мне написать функцию JS, которая будет принимать строку (слово) в качестве аргумента. А затем добавьте дополнительный стиль (например, измените цвет) для всех этих слов в HTML. Я не знаю, где он находится. Это «слово» может находиться внутри <div>, <p> или даже <b>.

EX:

HTML:

<p id="p1">Hello World!</p>
<div>Hello World!</div>

function Change(string word){
  //change font color to red
}

Функция вызова:

Change("Hello")

Результат:

Все слова « Hello » в HTML имеют красный цвет шрифта.

Кстати, а можно ли такое написать?

1
bodkia22 9 Июн 2021 в 00:17

3 ответа

Лучший ответ

Вот действительно простой пример. Обратите внимание, что, хотя регистр не учитывается, он заменит все вхождения на любой указанный вами регистр. Например, в блоке ниже я вставил "Hello", который устанавливает для одного вхождения hello значение Hello. Вы, конечно, можете удалить i во флагах регулярного выражения, чтобы снова сделать его чувствительным к регистру, но вам придется запускать функцию дважды с обоими регистрами, чтобы выделить оба экземпляра.

function color(str, color)
{
  var rx = new RegExp(str, "ig");
  var replaced = document.body.innerHTML.replaceAll(rx, "<span style='color:"+color+"'>"+str+"</span>");
  document.body.innerHTML = replaced;
}

color("Hello", "red");
<p>Hello world</p>
<p>This block contains the word "hello."</p>
1
David 8 Июн 2021 в 21:27

Вот метод, который найдет слово и заменит его на <span class='red'> word </span>. Я установил класс под названием «красный» со стилем. Это очень примитивно, но работает для простых приложений. В комментариях ниже есть пояснения.

function Change(word) {
  //find all html elements on the page inside the body tag
  let elems = document.querySelectorAll("body *");
  // get our replacement ready
  let span = "<span class='red'>" + word + "</span>";
  //loop through all the elements
  for (let x = 0; x < elems.length; x++) {
    // for each element, 'split' by the word we're looking for, then 'join' it back with the replacement
    elems[x].innerHTML = elems[x].innerHTML.split(word).join(span);
  }
}

Change('Hello', 'Goodbye');
.red {
  color: red;
}
<p id="p1">Hello World!</p>
<div>Hello World!</div>
1
Kinglish 8 Июн 2021 в 22:10

CSS создан для стилизации. Используйте JS, чтобы добавить класс в свой HTML-элемент.

Функция:

Передайте строку для поиска и selector / s для поиска. В моем случае я ищу все теги в DOM и возвращаю массив [...document.getElementsByTagName('*')].

Мы определяем < sizesarray для хранения неограниченных элементов, которые мы хотим искать, и другой, содержащий теги ограниченные . мы хотим пропустить. Затем мы зацикливаем массив output с помощью !restricted.includes(tag.nodeName.toLowerCase(), это проверяет, не включает ли наш <▪restricted массив элемент из нашего запроса DOM. Для элементов, возвращающих < sizestrue, мы помещаем их в наш массив output -> output.push(tag)

Когда у нас есть массив output, заполненный тегами, которые мы хотим искать, мы ищем по тегу наши <▪string -> tag.innerText.includes(string) и < strong> ОЧЕНЬ ВАЖНО: !(tag.textContent.match(/\n/g)||[]).length проверит, что это правильный дочерний узел. Если это вернет < 1xtrue, мы заменим теги {{X3 }} и просто оберните нашу строку тегами < sizesspan, которые теперь содержат класс, стилизованный так, как мы хотим, ->

tag.innerHTML = tag.innerText.replace(string, `<span class="red">${string}</span>`)
const els = [...document.getElementsByTagName('*')]
const string = "Hello"

function Change(string, els) {
  const restricted = ['html', 'body', 'head', 'style', 'meta', 'script']
  const output = []
  els.forEach(tag => !restricted.includes(tag.nodeName.toLowerCase()) ? output.push(tag) : null)
  output.forEach(tag => tag.innerText.includes(string) && !(tag.textContent.match(/\n/g) || []).length ? tag.innerHTML = tag.innerText.replace(string, `<span class="red">${string}</span>`) : null)
}

Change(string, els)
.red {
  color: red;
}
<p id="p1">Hello World!</p>
<div>Hello World...</div>

<div>
  <ul>
    <li>Hello World.</li>
  </ul>
</div>

<p>
  <a href="#">Hello <span>World</span></a>
</p>

<table border="1">
<tr>
  <th>Hello</th><th>World</th>
  </tr>
<tr>
  <td>World</td><td>Hello</td>
  </tr>
</table>
0
dale landry 8 Июн 2021 в 23:54