将所有纯文本替换为同一个div的类 [英] Replace all plain-text to class of same div

问题描述

我在这里问了 。


现在尝试用 [make-this-class] （多于一个）纯文本c> 改为像 < div class ='make-this-class'>< / div> 和 [make-this-class2] 添加到类如 < div class ='make-this-class2'>< / div> ; 在同一个div上< div class ='this-div-only'>< / div> 。问题是给定的js只替换一个单独的文本，意味着它不能替换其他文本的同一个div，当试图替换文本多于一个时，它只替换同一个div的一个文本。下面给出了HTML和JS的示例。

HTML：

 < div class ='not-others-div'> 
 text text [make-this-class] text 
< / div> 
 
文本文本
 
< div class ='this-div-only'> <！ - 仅限此div  - > 
 text [make-this-class]文本[make-this-class2]和[make-this-class3]以及10个文本，像这样<！ - 尝试替换多于一个文本 - > 
< / div> 
  

JQuery：

<（$，$，$，$，$，$，$，$，$，$，$）返回html.replace（/ \ [（。*） \] /，$（< div />，{class：$ 1}）[0] .outerHTML）
}）


那么如何用jquery将许多文本替换为同一个div元素的类（10 10 text ）？

解决方案

在正则表达式中添加 g 全局标志，并且您还需要使用。*？用于匹配最短的数据

$（。this-div-only） .html（function（i，html）{return html.replace（/ \ [（。*？）\] / g，$（< div />，{class：$ 1} ）[0] .outerHTML）}）

<脚本SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery。 min.js>< / script>< div class ='this-div-only'> < div class ='this-div-only'> <！ - 仅限此div - >文本[make-this-class]文本[make-this-class2]和[make-this-class3]以及10个文本，像这样<！ - 试图替换文本多于一个 - > text [make-this-class] text [make-this-class2] and [make-this-class3] and 10 text< / div>

I have asked related question here.
Now trying to replace many (more then one) plain-text like [make-this-class] to class like <div class='make-this-class'></div> and [make-this-class2] to a class like <div class='make-this-class2'></div> on same div <div class='this-div-only'></div>.

Problem is given js replace only one single text, means its not replace others text of same div, when trying to replace text more then one it replace only one text of same div. Example HTML and JS given below.

HTML:

<div class='not-others-div'>
text text [make-this-class] text
</div>

Text text text

<div class='this-div-only'> <!-- this div only -->
text [make-this-class] text [make-this-class2] and [make-this-class3] and 10 text like this <!--trying to replace text more then one-->
</div>

JQuery:

$(".this-div-only").html(function(i, html) {
  return html.replace(/\[(.*)\]/, $("<div />", {"class":"$1"})[0].outerHTML)
})

So how to replace many text to a class (10 ten text) of same div of dom elements by jquery ?

解决方案

Add g global flag in regex, and also you need to use .*? for matching the shortest

$(".this-div-only").html(function(i, html) {
  return html.replace(/\[(.*?)\]/g, $("<div />", {
    "class": "$1"
  })[0].outerHTML)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='this-div-only'>
  <div class='this-div-only'>
    <!-- this div only -->
    text [make-this-class] text [make-this-class2] and [make-this-class3] and 10 text like this
    <!--trying to replace text more then one-->
    text [make-this-class] text [make-this-class2] and [make-this-class3] and 10 text
  </div>

这篇关于将所有纯文本替换为同一个div的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！