Question

我想在特定div中选择特定字符cm，并在一个范围内添加。

html：

$ctrl.changeMap = function() {
    $ctrl.mapType = mapService.getOSM();
    $ctrl.refreshMap = true;
  }

Jquery的

<div class="fc_img_tooltip_desc" style="line-height:1em;">20X10cm
10X100
50X50
100X100</div>

这不起作用，我做错了。

我有什么：

<script>
function highlight_words(cm , fc_img_tooltip_desc) {
if(keywords) {
    var textNodes;
    keywords = keywords.replace(/\W/g, '');
    var str = keywords.split(" ");
    $(str).each(function() {
        var term = this;
        var textNodes = $(element).contents().filter(function() { return 
this.nodeType === 3 });
        textNodes.each(function() {
          var content = $(this).text();
          var regex = new RegExp(term, "gi");
          content = content.replace(regex, '<span class="highlight">' + term 
+ '</span>');
          $(this).replaceWith(content);
        });
    });
}
}
$(window).onload(function(){ highlight_words(); });
</script>

我想要的是什么：

<div class="fc_img_tooltip_desc" style="line-height:1em;">20X10cm
10X100cm
50X50cm
100X100cm</div>

Answer 1

选择包含my top menu bar image的HTML元素，然后在textContent属性上进行替换：

＆＃13;

var el = document.querySelector('.fc_img_tooltip_desc');
el.textContent = el.textContent.replace(/\Bcm/, function(match){
  return ' ' + match; 
})

＆＃13;

<div class="fc_img_tooltip_desc" style="line-height:1em;">20X10cm
10X100
50X50
100X100</div>

＆＃13;

将以上脚本放在html文档的底部，或者在DOMContentLoaded事件上触发此代码段，如下所示：

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) { 
        var el = document.querySelector('.fc_img_tooltip_desc');
        el.textContent = el.textContent.replace(/\Bcm/, function(match){
            return ' ' + match; 
        })
    });
</script>

更新

如果要选择多个元素，则必须使用querySelector()函数：

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) { 
        document.querySelectorAll('.fc_img_tooltip_desc').forEach(function(value) {
            value.innerHTML = value.textContent.replace(/\Bcm/gi, function(match) {
                return ' <span class="highlight">' + match + '</span>';  
            })
        });
    });
</script>

Answer 2

根据您在问题正文中的评论和澄清的例子：

＆＃13;

var text = $('.fc_img_tooltip_desc').text();
text = text.replace(/([^\s])cm/gi, '$1 cm<br />');
$('.fc_img_tooltip_desc').html(text);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fc_img_tooltip_desc" style="line-height:1em;">20X10cm
10X100cm
50X50cm
100X100cm</div>

＆＃13;

此代码是可运行的。这是你想要达到的目标吗？

第2版根据要求在评论中发生变化：

＆＃13;

var text = $('.fc_img_tooltip_desc').text();
text = text.replace('cm', '<span>cm</span>');
$('.highlight').html(text);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fc_img_tooltip_desc" style="line-height:1em;">
20X10cm
10X100
50X50
100X100
</div>
<span class="highlight"></span>

＆＃13;

仅供参考：您的JS示例有3个明显的缺陷。 1：函数（highlight_words）签名有2个参数，但是你没有调用函数。 2：2个签名参数未在函数体中使用，因此问题 - 为什么需要这个签名？ 3：＆＃39;关键字＆＃39;未定义 - 不在函数体中，也不在函数体外，因此导致JS警告并且从不传递if (keywords)条件。这些是一般编程问题，与您的具体问题无关，但具有基本的编程经验。您可能需要练习（或/和阅读）一些比操作DOM更基本的编程任务。

Answer 3

在jQuery中，您可以使用match（）方法检索具有[转换单位]（在本例中为'cm'）的文本。

["10x20cm", index: 0, input: "10x20cm 10X100 50X50 100X100"]

将从中返回一个[数组]，如下所示：

        sp.setDividerLocation(.3);
        sp2.setDividerLocation(.6);

请注意，此模式将检索与该条件匹配的“1st”字符串。

以下是jsfiddle以供进一步参考：ref keyword

希望这有助于您的情况。

使用jquery选择特定字符

3 个答案:

更新