Question

我试图在div中将纯文本的第一部分环绕一个跨度，并用不同的字体颜色和字体大小设置其样式，然后在其后换行。问题是，这是纯文本，其中我无法在后端中添加任何自定义代码，因此我必须找到一个技巧来完成这项工作。

这是CMS中的纯文本输入字段，这是前端的结果：

Next date: 12.09.-25.09.2019. In this course you can learn how to...

这是日期部分，我要突出显示...

现在我有几个想法可以解决问题：

1。在[]中设置日期，然后通过jQuery进行标识，例如：

[Next date: 12.09.-25.09.2019] In this course you can learn how to...

因此，方括号之间的所有内容都应为红色

要计算前28个字符，并使它们在前端，所以我必须保持日期结构始终相同，可能，但是不太方便

3.在要突出显示的日期/部分之后插入### ...

Next date: 12.09.-25.09.2019 ### In this course you can learn how to...

...并告诉jquery在###之前查找所有内容，然后环绕一个范围。当他们完成工作后，###当然应该消失了：-）

重要的是...一个站点上会有多个不同的日期，因此第三个解决方案可能效果最好，因此我可以解析整个站点并搜索###以编辑之前的所有内容，每个实例...所以在这些标签之前说什么都没关系...在###之后添加换行符也很不错，以便随后的文本以新行开头... < / p>

这是给定的代码：

<div id="cc-m-1" class="j-module n j-text ">
Next date: 12.09.-25.09.2019 In this course you can learn how to...
</div>

<div id="cc-m-1" class="j-module n j-text ">
Next date: 26.09.-05.10.2019 This is another course for you...
</div>

希望您能想到，有人可以为我提供帮助，谢谢！

Answer 1

没有更好的数据样本，很难处理所有怪癖，但这应该可以帮助您入门。祝你好运！

$(document).ready(function() {
  $(".j-module").each(function() {
    styleDiv($(this).attr("id"));
  });
});

function isDate(dt) {
  var date = new Date(dt.replace(".", "-"));
  return (date instanceof Date);
}

function styleDiv(id) {
  var alltext = $("#" + id);
  var chunks = new Array();
  chunks = $("#" + id).text().split(" ");
  var texttobold = "";
  for (var i = 0; i < chunks.length; i++) {
    var dateFinder = chunks[i];
    texttobold = texttobold += " " + dateFinder;
    if (dateFinder.length == 10 && isDate(dateFinder)) {
      var outpt = "<span class='boldtext'>" + texttobold + "</span>";
      alltext.html(alltext.text().replace(texttobold.trim(), outpt));
    }
  }
}

.boldtext {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cc-m-1" class="j-module n j-text">
  Next date: 25.09.2019 In this course you can learn how to...
</div>

<div id="cc-m-2" class="j-module n j-text">
  Your favorite date: 21.12.2020 In this course you can learn how to...
</div>

<div id="cc-m-3" class="j-module n j-text">
  Next date: 04.09.2019 In this course you can learn how to...
</div>

进行了编辑，以扩展所需样式的文本。

如何在div的文本的第一部分周围添加跨度

1。在[]中设置日期，然后通过jQuery进行标识，例如：

3.在要突出显示的日期/部分之后插入### ...

1 个答案: