Возможно давать ему стиль всем происшествиям слова в тексте?

Мне хотелось бы знать, возможно ли делать это, что я созерцаю:

У нас есть текст который и я хочу, чтобы он выделил X Слово, например, Каждый раз, когда он поместил "Привет", окажитесь написанным в Синем цвете. Не будучи должен приклеивать этикетку в каждом слове, а конфигурировать styles.css для того, чтобы, когда будет один "Привет" на странице, он это поместил directmente в синий цвет.

9
задан 30.12.2016, 19:17
0 ответов

Только с css не идет быть возможным, я оставляю тебе код этого ответа, который функционирует с javascript.

Потом ты можешь использовать css чтобы искать слова и давать ему стиль [word=hola]:

function makeHighlightable() {
  
  var n;
  var a=[];
  var walk = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
  
  while (n = walk.nextNode()) a.push(n);
  
    for (var i = 0; i < a.length; i++) {
      
      var newSpan = document.createElement('span');      
      var words   = a[i].nodeValue.split(' ');
      
        for(var j = 0; j < words.length; j++) {
          
            var escapedWord = words[j].replace(/^\w /ig,'');
          
            words[j] = '<span word="'+escapedWord+'">'+words[j]+'</span>';
        }
      
        words = words.join(' ');
        
        newSpan.innerHTML = words;
        
        a[i].parentNode.replaceChild(newSpan,a[i]);
    }
}

makeHighlightable()
.hola1 [word=Hóla] { 
  color: blue;
  font-weight: bold;
}

.hola2 [word=hóla] { 
  color: darkorange ;
  font-weight: bold;
}

.hola3 [word=hola] { 
  color: red;
  font-weight: bold;
}
<p class="hola1">Hóla hóla ahora sin tilde Hola hola ahora con puntos Hóla::: hóla::: y sin puntos Hóla hóla</p>

<p class="hola2">Hóla hóla ahora sin tilde Hola hola ahora con puntos Hóla::: hóla::: y sin puntos Hóla hóla</p>

<p class="hola3">Hóla hóla ahora sin tilde Hola hola ahora con puntos Hóla::: hóla::: y sin puntos Hóla hóla</p>
8
ответ дан 03.12.2019, 17:55
  • 1
    Он мне кажется, что не deberí чтобы удалять разрывы lí nea, есть случаи, в которых у них есть значение внутри HTML. С другой стороны, está n крася знаки puntuació n около hola, и этого случая не funcionarí в со словами с тильдой –  30.12.2016, 22:01

В дополнении в ответ @aldanux, мы можем использовать RegExp чтобы делать нечувствительные поиски в прописные буквы или строчные буквы.

function highlight(word) {
  var wordRe = new RegExp('('+word+')', 'ig');
  var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  var nodes = [];
  while (treeWalker.nextNode()) {
    if (treeWalker.currentNode.textContent.match(wordRe)) {
      nodes.push(treeWalker.currentNode);
    }
  }

  var element, i;
  for (i = 0; i < nodes.length; i++) {
    element = document.createElement('span');
    element.innerHTML = nodes[i].textContent.replace(wordRe, '<span class="blue">$1</span>');
    nodes[i].parentNode.replaceChild(element, nodes[i]);
  }
}
highlight('hola');
.blue{
 color: blue;
}
<div id="hola">
  Hola este es un texto de prueba. Asi es hola, es una prueba
  
  Hola este es un texto de prueba. Asi es hola, es una prueba hola
  
  <p>Hola este es un texto de prueba. Asi es hola, es una prueba</p>
  
  Hola este es un texto de prueba. Asi es hola, es una prueba
  
  <p>Hola este es un texto de prueba. Asi es hola, es una prueba as dasd</p>
  
</div>
4
ответ дан 03.12.2019, 17:55
  • 1
    Спасибо, я пытаюсь, но не добиваюсь того, чтобы оно функционировало, с ответов, что mandá is он-лайн идет весь Ok, но скопировав có я говорю, что нет способа, которого он выполнял бы этот javascript. –  30.12.2016, 21:03
  • 2
    ¿ Где и как дела помещая script? –  30.12.2016, 21:06
  • 3
    Я попытался так в самом файле html как внешне, любой рукописный шрифт я идет, но этот - нет, я не понимаю из-за qué. –  30.12.2016, 21:26
  • 4
    @Jesú s, я обновил мой ответ. Пробуй посмотрим así оно ты функционирует. –  30.12.2016, 21:54
  • 5
    Это ясно лучший ответ. Есть деталь @Marcos, tené в счете, во время замены, что у элемента может быть mú ltiples textnodes (хотя я не понимаю из-за qué usá s Arrau вместо того, чтобы заменять прямо в treewalker)... Ademá s, quizá s был хорошей идеей использовать \b раньше и despué s искавшего слова –  30.12.2016, 22:10

С только CSS не возможно. Но с Javascript, если могут, ты Был бы должен делать поиски в DOM и заменять тексты, которые ты хочешь.

Эдж: Искать "Привет" и заменять из-за <div class="color-blue">Hola</div> и в css ты был бы должен иметь:

.color-blue{color:blue;}

Привет.

1
ответ дан 03.12.2019, 17:55

Это не является возможным просто с CSS. Однако, ты можешь использовать regex и функцию replace Javascript чтобы показывать все происшествия слова в тексте определенного цвета.

То, что я делаю в этом случае, он состоит в том, чтобы заменять (обнаруживая с regex, где - слово hola) hola оригинал из-за нового hola что идет содержаться внутри одного span с классом azul. Этот класс будет являться той, которая он со стиля до слова.

Пример:

var span = document.getElementById("texto");
var texto = span.innerHTML;
var textoReemplazado = texto.replace(/hola/g, "<span class=\"azul\">hola</span>");
span.innerHTML = textoReemplazado;
.azul{
  color: blue;
}
<span id="texto">Texto hola este texto en el que pone hola, y a su vez otra vez hola, pero hola, y hola, y hola otra vez de nuevo.</span>

НАБЛЮДЕНИЕ: Этот пример не функционировал бы, если бы ты вернул HTML контейнера (который вернет также HTML элементов дети, которых он будет содержать), если какой-либо из элементов дети у него есть как id или clase ключевое слово, которое мы хотим заменить, так как он также заменит эти идентификации или классы, что спровоцирует, что случается неосновательность в HTML. Ты был бы должен использовать это осторожно.

1
ответ дан 03.12.2019, 17:55
  • 1
    Проблема с этим ответом, - если вместо hola будет искаться texto в document.body, HTML romperí в, так как цепь texto tambié n будь как стоимость признака id из span –  30.12.2016, 19:31