JavaScript para adicionar tags HTML em torno do conteúdo

votos
2

Eu queria saber se é possível usar JavaScript para adicionar uma tag <div> em torno de uma palavra em uma página HTML.

Eu tenho uma pesquisa JS que procura um conjunto de arquivos HTML e retorna uma lista de arquivos que contenham a palavra-chave. Eu gostaria de ser capaz de adicionar dinamicamente um <div class = highlight> em torno da palavra-chave para que ele se destaca.

Se uma pesquisa alternativo é realizada, o original <div> 's terão de ser removidos e novos adicionados. Alguém sabe se isso é mesmo possível?

Todas as dicas ou sugestões seria muito apreciada.

Felicidades,

Laurie.

Publicado 19/05/2009 em 18:46
fonte usuário
Em outras línguas...                            


4 respostas

votos
3

Em geral, você vai precisar para analisar o código html, a fim de garantir que você só estão destacando palavras-chave e não texto invisível ou código (como atributos de texto alt para imagens ou marcação real). Se você faz como Jesse Hallett sugeriu :

$('body').html($('body').html().replace(/(pretzel)/gi, '<b>$1</b>'));

Você vai correr em problemas com determinadas palavras-chave e documentos. Por exemplo:

<html>
<head><title>A history of tables and tableware</title></head>
<body>
<p>The table has a fantastic history.  Consider the following:</p>
<table><tr><td>Year</td><td>Number of tables made</td></tr>
<tr><td>1999</td><td>12</td></tr>
<tr><td>2009</td><td>14</td></tr>
</table>
<img src="/images/a_grand_table.jpg" alt="A grand table from designer John Tableius">
</body>
</html>

Este documento relativamente simples pode ser encontrada através de pesquisa para a palavra "mesa", mas se você apenas substituir o texto com o texto envolvido você pode acabar com isso:

<<span class="highlight">table</span>><tr><td>Year</td><td>Number of <span class="highlight">table</span>s made</td></tr>

e isto:

<img src="/images/a_grand_<span class="highlight">table</span>.jpg" alt="A grand <span class="highlight">table</span> from designer John <span class="highlight">Table</span>ius">

Isso significa que você precisa HTML analisado. E analisar HTML é complicado. Mas se você pode assumir um certo controlo de qualidade sobre os documentos HTML (ou seja, sem-Ângulo-colchetes abertos sem fechar colchetes, etc), então você deve ser capaz de digitalizar o texto à procura de não-tag, os dados não-atributo que pode ser adicionalmente-marcado.

Aqui estão algumas Javascript que pode fazer isso:

function highlight(word, text) {
  var result = '';

  //char currentChar;
  var csc; // current search char
  var wordPos = 0;
  var textPos = 0;
  var partialMatch = ''; // container for partial match

  var inTag = false;

  // iterate over the characters in the array
  // if we find an HTML element, ignore the element and its attributes.
  // otherwise try to match the characters to the characters in the word
  // if we find a match append the highlight text, then the word, then the close-highlight
  // otherwise, just append whatever we find.

  for (textPos = 0; textPos < text.length; textPos++) {
    csc = text.charAt(textPos);
    if (csc == '<') {
      inTag = true;
      result += partialMatch;
      partialMatch = '';
      wordPos = 0;
    }
    if (inTag) {
      result += csc ;
    } else {
      var currentChar = word.charAt(wordPos);
      if (csc == currentChar && textPos + (word.length - wordPos) <= text.length) {
        // we are matching the current word
        partialMatch += csc;
        wordPos++;
        if (wordPos == word.length) {
          // we've matched the whole word
          result += '<span class="highlight">';
          result += partialMatch;
          result += '</span>';
          wordPos = 0;
          partialMatch = '';
        }
      } else if (wordPos > 0) {
        // we thought we had a match, but we don't, so append the partial match and move on
        result += partialMatch;
        result += csc;
        partialMatch = '';
        wordPos = 0;
      } else {
        result += csc;
      }
    }


    if (inTag && csc == '>') {
      inTag = false;
    }
  }
  return result;
}
Respondeu 19/05/2009 em 19:53
fonte usuário

votos
0

você não pode apenas escrever um seletor como tal para embrulhar tudo isso?

$("* :contains('foo')").wrap("<div class='bar'></div>");

adam escreveu o código acima para fazer a remoção:

$('div.bar').each(function(){ $(this).after( $(this).text() ); }).remove();

edit: pensando bem, a primeira instrução retorna um elemento que iria envolver o elemento com a tag div e não a única palavra. talvez um regex substituir seria uma solução melhor aqui.

Respondeu 19/05/2009 em 19:23
fonte usuário

votos
0

Faz o DOM API não fornece uma maneira super fácil de fazer isso. Tanto quanto eu sei que a melhor solução é ler texto em JavaScript, use replacepara fazer as mudanças que você quer, e escrever todo o conteúdo de volta. Você pode fazer isso um nó HTML de cada vez, ou modificar o todo <body>de uma só vez.

Aqui está como isso pode funcionar em jQuery:

$('body').html($('body').html().replace(/(pretzel)/gi, '<b>$1</b>'));
Respondeu 19/05/2009 em 19:17
fonte usuário

votos
0

Embrulho é muito fácil com jQuery :

$('span').wrap('<div class="highlight"></div>'); // wraps spans in a b tag

Em seguida, remover, algo como isto:

$('div.highlight').each(function(){ $(this).after( $(this).text() ); }).remove();

Parece que você vai ter que fazer alguma divisão corda, embora, por isso embrulhar pode não funcionar a menos que você quiser pré-embrulhar todas as suas palavras com algum tag (ie. Span).

Respondeu 19/05/2009 em 18:51
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more