当变量中的.find(）项有多个匹配项时，jQuery问题

jQuery issue when .find() term in variable with more than one match

本文关键字：问题 jQuery 变量 find      更新时间：2023-09-26

我的目标是让用户用光标选择文本，并将所选内容输出到不同的div中，其中<span>标记中突出显示文本。

所以，我有这样的选择集：

var sel = jQuery.selection();

然后我将所选内容封装到<span>中并输出它：

var $title = jQuery(this).parent().find('.title').text();
var $result;
$result = $title.replace(sel, '<span>'+sel+'</span>');
// output result
jQuery(this).parent().find('.output').html($result);

它运行良好。

问题是，如果文本包含两次相同的术语，而用户选择了第二个术语，它会找到并替换第一个术语。

例如，随机文本：

hello world lorem ipsum hello

如果用户选择第二个hello，它将包装第一个。

是否有解决方案可用于解决这类情况？

jsFiddle进行测试。

获取可以开始替换的偏移量。。。

$('button').click(function() {
  var sel = jQuery.selection();
  var $title = jQuery(this).parent().find('.title').text();
  var $result;
  var highlightFrom = window.getSelection().anchorOffset;

    $result = $title.substr(0,highlightFrom) + $title.substr(highlightFrom, $title.length).replace(sel, '<span>' + sel + '</span>');

  // output result
  jQuery(this).parent().find('.output').text($result);
});

在您的样本中，highlighfrom在选择第二个hello时给出24。

更新的Fiddle

AnchorOffset受到IE9+和其他主要浏览器的支持。如果您需要一个有效的替代方案，我指的是Rangy，如下所述：AnchorOffset替代

有关文本选择范围和浏览器兼容性的更多信息，请参阅此处

测试-Chrome、IE11+、FF

我知道，使用锚点偏移量，浏览器兼容性仍然存在问题。但我想到的第一件事是把给定的字符串分成三部分。选择之前的部分、选择的部分和其余部分。然后将选定的零件包装起来，再将它们放在一起。。。

$('button').click(function() {
  var $sel = jQuery.selection();
  var $highlightStart = window.getSelection().anchorOffset;
  var $highlightEnd = window.getSelection().focusOffset;
  var $title = jQuery(this).parent().find('.title').text();
  var $textLength = $title.length;
  var $textBefore = $title.substr(0,$highlightStart);
  var $textToWrap = $title.substr($highlightStart, $highlightEnd - $highlightStart);
  var $textAfter = $title.substr($highlightEnd, $textLength - $highlightEnd);
  var $result;
  $result = $textBefore + '<span>' + $textToWrap + '</span>' + $textAfter;
  // output result
  jQuery(this).parent().find('.output').text($result);
});

https://jsfiddle.net/sqd5gsz5/6/

相关文章：