Question

我正在尝试使用jQuery和CSS格式化全大写大型机文本，以便它们更清晰。

所以，它应该采取像这样的文本块..

THESE ARE MY FAVORITE FRUITS. [BANANA] [APPLE] [ORANGE]

并通过将打开和关闭括号转换为HTML标记将其转换为类似的内容。

这些是我最喜欢的水果。
香蕉
苹果橙子

这是我痛苦的尝试。

<style> 
  .blah {text-transform:capitalize; }    
</style>
<div>THESE ARE MY FAVORITE FRUITS. [BANANA] [APPLE] [ORANGE] </div>
<script> 
    $(document).ready(function() {
        $("div:contains('[')").replaceWith("<p class='blah'>");
        $("div:contains(']')").replaceWith("</p>"); 
    }); 
</script>

然后我意识到选择器的目标是“div”标签，而不是“[”。

Answer 1

尝试

$(document).ready(function () {
    $('.blah').html(function(i,text){
        return text.replace(/\[(.*?)\]/g, '<p>$1</p>')
    })
});

演示：Fiddle

Answer 2

正如你所说，你的目标是div，所以现在你只需要获取div文本，并用替换替换元素，如下所示：

$(document).ready(function() {
    $("div:contains('[')").each(function() {
          var text = $(this).text();
          text = text.split('[').join("<p class='blah'>").split(']').join("</p>");
          $(this).text(text);
});

Answer 3

也许是这样的？

$(document).ready(function() {
  $('.blah').html($('.blah').html().replace(/[/g,"<br>").replace(/]/g,""));
});

假设您的原始文本块将应用.blah类。

虽然，最好将每个项目包装在一个容器中（带有类名的span），抓取所有容器，然后通过.each（）函数运行它们，该函数对每个容器进行更改。

Answer 4

<div class="blah">tHESE ARE MY FAVORITE FRUITS. [BANANA] [APPLE] [ORANGE]</div>

<style> 
  .blah {text-transform:capitalize; }    
</style> 

<script> 
    $(document).ready(function () {
        $('.blah').html(function (i, text) {
            return text.replace(/\[(.*?)\]/g, '<br />$1').toLowerCase();
        });
    }); 
</script>

Demo

如何使用jQuery设置全帽大型机文本的样式

4 个答案: