Question

问题：

假设我有一个像这样的文本的div

<div id=”bla”>One Two Three Four Five</div>

我希望能够以编程方式获取任何子字符串并将其包装到<div>并附加一些处理程序（例如onlick）。我希望能够多次对文本的不同部分进行这样的操作，所以最后我的div最终会看起来像这样：

<div id=”bla”>One <div id=”bla2”>Two</div> Three <div id=”bla4”>Four</div> Five</div>

问题是怎么做？

一些想法：

可能，如果我想将字符串Two包装成div，那么如果我只使用html()获取整个div内容，请在Two之前和之后执行子字符串，然后在div上执行.empty() { {1}} - 它看起来不错，但它会将beforeSubstring和afterSubstring放入“”并删除所有以前的处理程序。但我想保留以前的处理程序，我不需要“”，因为它会让我感到困惑。

有什么想法？：）

Answer 1

首先需要缓存元素的内容，例如var cont = $("#bla").text();
在插入包装器之前总是使用cont（使用RegExp我想...）并将结果放回到$("#bla").html(regexModifiedCont);

之类的元素中

示例：

var $contentEl = $("#bla"); var content = $contentEl.text(); // Cache the original content! $("#query").on("input", function(){ var reg = new RegExp("("+ $.trim(this.value) +")", "ig"); $contentEl.html( content.replace(reg, "<span class='clickable'>$1</span>") ); }); $("body").on("click", ".clickable", function(){ alert( $(this).text() ); });

.clickable{ background:gold; cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Write a text to take <input id=query type=text> <div id=bla>One Two Three Four Five</div>

Answer 2

也许您正在寻找类似的东西？ =）

  function wrapTag(string, tag) {
    return '<'+tag+'>' + string + '</'+tag+'>';
  }

  // http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text
  function getSelectionText() {
      var text = "";
      if (window.getSelection) {
          text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
          text = document.selection.createRange().text;
      }
      return text;
  }      

  function highlightSelection(tag) {
    var highlighted = getSelectionText();
    var newContent = $('#paragraph').html()
                      .replace(/\s+/g,' ').trim()
                      .replace(highlighted, wrapTag(highlighted, tag));
    $('#paragraph').html(newContent);
  }

工作示例： http://plnkr.co/edit/VCpGScPR9TEjuY3mtP2j?p=preview

DOM操作，同时保留以前的处理程序

2 个答案: