首页 文章

在文本正文中突出显示部分短语[关闭]

提问于
浏览 次
0

我试图在文本正文中找到一个短语的部分（使用jQuery / JS），如下例所示：

短语：一开始，上帝创造了天地 .

文字：Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua . Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat . In the beginning Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur . Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum .

它可能不是整个短语，而只是短语中的几个单词 . 基本上我想找到与原始短语的一部分匹配的单词序列 .

我已经做了很多搜索，但还没有提出任何想法 .

进一步澄清：用户可以输入短语“在上帝创造的开始”，文本可能只能说“上帝创造” . 尽管如此，应该突出显示“上帝创造”，因为它与用户输入的部分短语相匹配 .

javascript jquery regex

7 回答

  • 2

    Try this: 使用正则表达式的短代码

    function hilight(search) {
  if(search=="")return false;
  var sbody = document.getElementById('sbody').innerHTML;
  sbody = sbody.replace(/<b class="hilight">([^<]+)<\/b>/gmi, '$1');  // remove previous hilighted text
  var re = new RegExp('\\b(' + search + ')\\b', 'gmi');
  // var re = '/\b(' + search + ')\b/gmi';
  subst = '<b class="hilight">$1</b>';
  var result = sbody.replace(re, subst);
  document.getElementById('sbody').innerHTML = result
}

    <input type="text" name="search" id="search" onkeyup="return hilight(this.value);" />

<div id="sbody">
  I'm attempting to find portions of a phrase in a body of text Nonetheless
  that "God created" should be highlighted because it matched part of the phrase the user entered.
</div>
    回复于
  • 1

    我是这样的：

    var minNumberOfWordsInSequence = 3;
var phrase = "In the beginning God created the heaven and the earth.";
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. In the beginning Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var phrasesToCheck = [];

phrase.split(' ').forEach(function(word, idx, words) {
    if (words.length > (idx + minNumberOfWordsInSequence - 1)) {
        var segment = "";
        for (var c = 0; c < minNumberOfWordsInSequence; c++) {
            segment += words[idx + c] + " ";
        }
        phrasesToCheck.push(segment.trim());
    }
});

phrasesToCheck.forEach(function(phrase) {
    if (text.toLowerCase().indexOf(phrase.toLowerCase()) > -1) {
        console.log("Found '" + phrase.toLowerCase() + "' in the text.");
    }
});

    这是一个可以玩的JSFiddle：http://jsfiddle.net/remus/mgv6mvwn/

    你可以将这一点压缩一点，但为了清楚起见，我会这样做 .

    回复于
  • -1

    First 您需要将搜索文本分解为组成单词 - 在有序列表中 . 忽略多个空格或标点符号的问题，这可以使用拆分简单地完成：

    var search_str =“一开始上帝创造了”

    var list = search_str.split（）

    Second 您需要使用该列表生成您想要匹配的单词组合 .

    list [1] , list [2] , list [3]，...

    list [1] " " list [2] , list [2] " " list [3] , list [3] " " list [4]，...

    list [1] " " list [2] " " list [3] , list [2] " " list [3] " " list [4] , list [3] " " list [4] " " list [5]，...

    等等

    这很可能 - 但编程这样的东西很麻烦 . 我不打算在这里试试 .

    稍后您需要查看RegExp以允许长白色空格和标点符号 .

    回复于
  • 0

    在这里，您可以决定是否要在搜索短语中搜索整个短语或每个单词，就像您要求的那样 . 然后，它将在原始文本下方的div中输出搜索和突出显示的文本，或者您可以通过更改此行将其更改为输出而不是原始文本：请参阅代码下方的选项以供使用 .

    document.getElementById('output').innerHTML = Text;

    至

    document.getElementById('searchtext').innerHTML = Text;

    DEMO

    HTML：

    <div id="searchtext">


I'm attempting to find portions of a phrase in a body of text (using jQuery/JS), like the example below:

Phrase: In the beginning God created the heaven and the earth.

Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. In the beginning Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

It may not be the entire phrase, but simply a few words from the phrase. Essentially I want to find sequences of words that match a portion of the original phrase.

I've done a lot of searching but have not come up with any ideas for this yet.

To further clarify: The user may input the phrase "In the beginning God created" and the text may ONLY say "God created". Nonetheless that "God created" should be highlighted because it matched part of the phrase the user entered.

</div>
<div id="output" style="margin-top:40px;"></div>

    JS:

    function HighlightText(bodyText, searchTerm) 
{

    highlightStartTag = "<font style='font-weight:bold;'>";
    highlightEndTag = "</font>";


  var newText = "";
  var i = -1;
  var lcSearchTerm = searchTerm.toLowerCase();
  var lcBodyText = bodyText.toLowerCase();

  while (bodyText.length > 0) {
    i = lcBodyText.indexOf(lcSearchTerm, i+1);
    if (i < 0) {
      newText += bodyText;
      bodyText = "";
    } else {

      if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {

        if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
          newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
          bodyText = bodyText.substr(i + searchTerm.length);
          lcBodyText = bodyText.toLowerCase();
          i = -1;
        }
      }
    }
  }

  return newText;
}


function highlight(searchPhrase, treatAsPhrase,element)
{
  if (treatAsPhrase) {
    searchArray = [searchPhrase];
  } else {
    searchArray = searchPhrase.split(" ");
  }

  var Text = document.getElementById(element).innerHTML;
  for (var i = 0; i < searchArray.length; i++) {
    Text = HighlightText(Text, searchArray[i]);
  }

  document.getElementById('output').innerHTML = Text;
  return true;
}

highlight('Afterwards God created',0,'searchtext')

    OPTIONS:

    \/ element that should be searched, see the DEMO
highlight('Afterwards God created',0,'searchtext')
                    ^searchPhrase  ^handle as phrase (1) or search for every single word (0)
    回复于
  • 0

    通过在空白区域上拆分搜索文本来创建正则表达式的方法可能有效 .

    搜索短语 "In the beginning" 可以转换为正则表达式：

    /(\b(In|the|beginning)\b([^\w<>]|(?=<))+)+/gi

    [^\w<>] 将使用非单词字符，但不使用HTML标记分隔符 . |(?=<) 因此它也将匹配（但不是connsume）打开或关闭HTML标记的开头 .

    HTML：

    <input id="search" type="text">
<span id="match" style="color: red;"></span>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <b>commodo</b> consequat. In the <i>beginning</i> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    JavaScript的：

    var _search = document.getElementById('search'),
    _text = document.getElementById('text'),
    _match = document.getElementById('match'),
    body = _text.innerHTML;

_match.parentElement.removeChild(_match);
_match.removeAttribute('id');

function onSearchInput(event) {
    var query = _search.value.trim(),
        rxStr = query.replace(/\s+/g, '|'),
        newBody = '',
        lastIndex = 0,
        result,
        rx;
    if (!rxStr) {
        _text.innerHTML = body;
        return;
    }
    rx = new RegExp('(\\b(' + rxStr + ')\\b([^\\w<>]|(?=<))+)+', 'ig');
    result = rx.exec(body);
    if (!result) {
        return;
    }
    console.log('rx:', rx.source);
    while (result) {
        console.log('match:', result[0]);
        newBody += body.slice(lastIndex, result.index);
        _match.textContent = result[0];
        newBody += _match.outerHTML;
        lastIndex = result.index + result[0].length;
        result = rx.exec(body);
    }
    newBody += body.slice(lastIndex);
    _text.innerHTML = newBody;
}

_search.addEventListener('input', onSearchInput);

    jsfiddle：http://jsfiddle.net/ta80a9h2/

    回复于
  • 0

    尝试

    var div = $("div") // element containing `text`
        , input = $("#input")
        , highlighted = $("<span class=word>").css("fontWeight", "bold");

    input.on({
      change: function (e) {
        var m = div.text().match(new RegExp(e.target.value, "i"));
        if (m !== null) {
            div.html(function (_, text) {
                return text.replace(highlighted[0].outerHTML, highlighted.text())
                       .replace(m[0], highlighted.text(m[0])[0].outerHTML)
            });
        } 
      }
    });

    var div = $("div") // element containing `text`
        , input = $("#input")
        , highlighted = $("<span class=word>").css("fontWeight", "bold");
    
    input.on({
      change: function (e) {
        var m = div.text().match(new RegExp(e.target.value, "i"));
        if (m !== null) {
            div.html(function (_, text) {
                return text.replace(highlighted[0].outerHTML, highlighted.text())
                       .replace(m[0], highlighted.text(m[0])[0].outerHTML)
            });
        } 
      }
      // clear `input`
      , focus:function(e) {
          e.target.value = ""
      }
    })

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input" type="text" />

    
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. In the beginning Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <div>
    回复于
  • 0

    我不确定你在原帖中提出的问题，但假设你知道你要查找的序列，你可以使用 indexOf() 方法返回给定值在字符串中的位置 .

    回复于

相关问题