如何在 JSON 中维护 <br/> 标签？答案

【问题标题】：How to maintain <br/> tags in JSON?如何在 JSON 中维护 <br/> 标签？
【发布时间】：2014-12-06 15:56:49
【问题描述】：

我正在获取 JSON 格式的博客 RSS 提要。我使用replace() JS 函数删除了内容中的所有 HTML 标签，因为我只希望它以纯文本格式显示（没有链接、图像、标题标签等）。

当我试图维护<br/> 标签时，我被卡住了。 content 块根本没有中断标签。

我应该在这里使用什么正确的正则表达式？

===

原始 RSS：http://www.ohjob.info/feeds/posts/default?alt=rss

JSON RSS：https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q=http://www.ohjob.info/feeds/posts/default?alt=rss&num=1

===

我的代码：

<html>
<head></head>
<body>
<button onclick="go()">Go</button>
<div id="title"></div>
<br>
<div id="post"></div>
<script>
function go() {
    var jsonobject = {
        "responseData": {
            "feed": {
                "feedUrl": "http://www.ohjob.info/feeds/posts/default?alt\u003drss",
                    "title": "Jawatan Kosong Kerajaan Dan Swasta 2014 | 2015",
                    "link": "http://www.ohjob.info/",
                    "author": "",
                    "description": "OhJobs, Jobs in Malaysia 2014, Jawatan Kosong 2014, Kerja Kosong 2014, Jawatan Kosong Kerajaan 2014, Jawatan Kosong Swasta 2014, Job Vacancy, Kerja Kosong Kerajaan, 2014, Iklan Jawatan Kosong 2014, Temuduga Terbuka 2014, Jawatan Kosong Kerajaan Terkini, Download Borang Jawatan Kosong, Kementerian Kesihatan, Majlis Bandaraya, Badan Berkanun, Majlis Perbandaran, Majlis Daerah, Universiti, Kolej, Jobsmalaysia, Kerajaan, Swasta, GLC, Job Vacancies",
                    "type": "rss20",
                    "entries": [{
                    "title": "Jawatan Kosong Perbadanan Kemajuan Pertanian Selangor (PKPS) (27 Oktober 2014)",
                        "link": "http://www.ohjob.info/2014/10/jawatan-kosong-perbadanan-kemajuan_9.html",
                        "author": "noreply@blogger.com (HambaAllah)",
                        "publishedDate": "Thu, 09 Oct 2014 19:49:00 -0700",
                        "contentSnippet": "Kerja Kosong Perbadanan Kemajuan Pertanian Selangor (PKPS)Permohonan adalah dipelawa kepada warganegara Malaysia bagi mengisi ...",
                        "content": "\u003cdiv style\u003d\"clear:both;text-align:center\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-HSZLsHVqvQA/VDdITkJfeyI/AAAAAAAAQco/3dYT8K2UipE/s1600/Kerja%2BKosong%2BPerbadanan%2BKemajuan%2BPertanian%2BSelangor%2B(PKPS).jpg\" style\u003d\"clear:left;float:left;margin-bottom:1em;margin-right:1em\"\u003e\u003cimg alt\u003d\"Jawatan Kerja Kosong Perbadanan Kemajuan Pertanian Selangor (PKPS) logo www.ohjob.info oktober 2014\" border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-HSZLsHVqvQA/VDdITkJfeyI/AAAAAAAAQco/3dYT8K2UipE/s1600/Kerja%2BKosong%2BPerbadanan%2BKemajuan%2BPertanian%2BSelangor%2B(PKPS).jpg\" height\u003d\"50\" width\u003d\"200\"\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv style\u003d\"text-align:center\"\u003e\u003cb\u003e\u003ca href\u003d\"http://www.ohjob.info/2012/09/iklan-disini.html\"\u003e\u003cu\u003eKerja Kosong\u003c/u\u003e\u003c/a\u003e Perbadanan Kemajuan Pertanian Selangor (PKPS)\u003c/b\u003e\u003c/div\u003ePermohonan adalah dipelawa kepada warganegara Malaysia bagi mengisi \u003ca href\u003d\"http://newjawatankosongkerajaan.blogspot.com/\"\u003e\u003cu\u003e\u003cb\u003ekekosongan jawatan\u003c/b\u003e\u003c/u\u003e\u003c/a\u003e di Perbadanan Kemajuan Pertanian Selangor (PKPS) seperti berikut:-\u003cbr\u003e\u003cbr\u003e1\u003ca href\u003d\"http://newjawatankosongkerajaan.blogspot.com/\"\u003e.\u003c/a\u003e Pegawai Keselamatan (Security Officer)\u003cbr\u003e\u003cbr\u003e\u003cspan style\u003d\"font-size:large\"\u003e\u003ca href\u003d\"http://www.pkps.gov.my/?p\u003d5820\" rel\u003d\"nofollow\"\u003e\u003cu\u003e\u003cb\u003eMUAT TURUN SYARAT KELAYAKAN\u003c/b\u003e\u003c/u\u003e\u003c/a\u003e\u003cbr\u003eDan cara memohon\u003c/span\u003e\u003cbr\u003e\u003cbr\u003eHubungi Kami:-\u003cbr\u003e\u003cbr\u003ePERBADANAN KEMAJUAN PERTANIAN SELANGOR\u003cbr\u003eWISMA PKPS\u003cbr\u003ePrecint 3.2, Tingkat 10 &ndash; 11,\u003cbr\u003ePersiaran Perbandaran, Seksyen 14,\u003cbr\u003e40000 Shah Alam, Selangor Darul Ehsan.\u003cbr\u003eTel : 03-55192621 / 2 / 3\u003cbr\u003eFax ; 03-55191481\u003cbr\u003e\u003cbr\u003eemail:   support@pkps.gov.my\u003cbr\u003e\u003cbr\u003e\u003cspan style\u003d\"color:red\"\u003e\u003cb\u003e\u003cspan style\u003d\"font-size:x-large\"\u003eTarikh Tutup Permohonan:\u003ca href\u003d\"http://www.ohjob.info/\"\u003e-\u003c/a\u003e 27 Oktober 2014 \u003c/span\u003e\u003c/b\u003e\u003c/span\u003e",
                        "categories": [
                        "2014",
                        "Jawatan Kosong",
                        "Jawatan Kosong 2014",
                        "Jawatan Kosong Kerajaan",
                        "Jawatan Kosong Kerajaan 2014",
                        "Kerajaan",
                        "Kerja Kosong",
                        "Kerja Kosong 2014",
                        "kerja kosong kerajaan",
                        "Kerja Kosong Kerajaan 2014",
                        "Oktober",
                        "Selangor"]
                }]
            }
        },
            "responseDetails": null,
            "responseStatus": 200
    };

    // data
    var length = jsonobject.responseData.feed.entries.length;
    alert('Data length: ' + length);

    var title = document.getElementById('title');
    var titlestr = jsonobject.responseData.feed.entries[0].title;
    title.innerHTML = titlestr;

    var post = document.getElementById('post');
    var poststr = jsonobject.responseData.feed.entries[0].content.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, '');
    post.innerHTML = poststr;
}
</script>
</body>
</html>

【问题讨论】：

标签： javascript regex json rss

【解决方案1】：

您可以使用负前瞻。试试/<(?!br\s*\/?)[^>]+>/g，比如this JSFiddle。

【讨论】：

【解决方案2】：

不要使用正则表达式。

相反，只需继续插入 HTML，然后遍历并删除不是 BR 的元素。

var poststr = jsonobject.responseData.feed.entries[0].content;

var els = post.getElementsByTagName("*");

for (var i = els.length; i--; ) {
    if (els[i].nodeName !== "BR") {
        unwrap(els[i]);
    }
}

这是unwrap 函数...

function unwrap(el) {
    while (el.childNodes[0]) {
        el.parentNode.insertBefore(el.childNodes[0], el);
    }
    el.parentNode.removeChild(el);
}

演示： http://jsfiddle.net/d4q6myme/

这使您可以对插入到 DOM 中的元素进行非常细粒度和可靠的控制，而不必求助于使用正则表达式的容易出错的做法。

【讨论】：

谢谢！这对我来说是新事物。
@zulhfreelancer：这就是 DOM 的用途。除了最简单的情况外，正则表达式是错误的工具。