我尝试在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...
例如,括号之间的所有内容都应该是红色的。
3.要在要突出显示的日期/部分后插入### ...
Next date: 12.09.-25.09.2019 ### In this course you can learn how to...
..。并告诉jquery在###之前查找所有内容,并包装一个跨度。当然,当他们的工作完成后,###应该消失:-)
重要的是要知道...一个站点上将有多个不同的日期,所以第三种解决方案可能最有效,所以我可以解析整个站点并搜索###来编辑它之前的所有内容,在每个实例中……所以在这些标签之前说什么都无关紧要...在###后面添加一个换行符也会很好,这样下面的文本就可以在新行中开始...
这是给定的代码:
<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>
希望你明白了,有人可以帮我,提前谢谢!
发布于 2019-07-17 03:36:38
如果没有更好的数据样本,很难处理所有的怪癖,但这应该可以让您开始。祝好运!
$(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>
编辑以扩展要设置样式的所需文本范围。
https://stackoverflow.com/questions/57063060
复制相似问题