JS如何获取HTML源码中的换行符

muhero 2009-11-01 05:15:28

HTML源码中代码片断(字符串)为如下形式

字符串1
字符串2
字符串3

而在HTML页面中显示如下：

字符串1 字符串2 字符串3

现拟实现JS动态给每行(HTML源码)字符串前插入一个HTML标签，如：
<li>字符串1
<li>字符串2
<li>字符串3

请问该如何实现

...全文

1206 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

Microogle 2009-11-02

打赏
举报

我猜LZ是要加上<br>标签来实现换行。

diffmaker 2009-11-02

打赏
举报

正则表达式

diffmaker 2009-11-02

打赏
举报

[Quote=引用 3 楼 yyz985 的回复:]
var s = "字符串1\n字符串2\n字符串3";
alert(s.replace(/(.+)/g, ' <li>$1 </li>'))

[/Quote]

人家给你正确答案了，表示什么？在下则表达式中，点号（.）表示换行符以外的字符

muhero 2009-11-02

打赏
举报

其实根本的问题就是不知道HTML源代码中的换行在JS中用什么来表示，“\r\n”是行不通的

yyz985 2009-11-02

打赏
举报

试了好像IE下不行
可以用<pre>或<textarea>容器代替

diffmaker 2009-11-02

打赏
举报

[Quote=引用 14 楼 cuixiping 的回复:]
以这段代码为例
<div>
第一行
第二行
第三行
</div>

ie中的innerHTML,outerHTML,nodeValue是取不到换行符的，但firefox的innerHTML,nodeValue的返回结果和源码一致是有换行符的。
所以，你的问题在firefox下比较好办。
如果在ie下，只能先获取本页的源码了，用ajax下载本页的源码，再做文本分析。
在后台就把内容中手动添加标志，是个不错的方法，添加注释就行了，换行处添加一个 不影响页面解析，但可以被innerHTML,outerHTML,nodeValue取到。
[/Quote]

是的，我只看了FF下，没有在IE下看，可能误导楼主了，不好1S了

sohighthesky 2009-11-02

打赏
举报

[Quote=引用 13 楼 diffmaker 的回复:]
楼主可以自己运行一下，看一下效果是不是你想要的
[/Quote]

还真以为能取到呢

[Quote=引用 14 楼 cuixiping 的回复:]
以这段代码为例
<div>
第一行
第二行
第三行
</div>

ie中的innerHTML,outerHTML,nodeValue是取不到换行符的，但firefox的innerHTML,nodeValue的返回结果和源码一致是有换行符的。
所以，你的问题在firefox下比较好办。
如果在ie下，只能先获取本页的源码了，用ajax下载本页的源码，再做文本分析。
在后台就把内容中手动添加标志，是个不错的方法，添加注释就行了，换行处添加一个 不影响页面解析，但可以被innerHTML,outerHTML,nodeValue取到。
[/Quote]
up，
早说了，ie下基本不行

cuixiping 2009-11-02

打赏
举报

以这段代码为例
<div>
第一行
第二行
第三行
</div>

ie中的innerHTML,outerHTML,nodeValue是取不到换行符的，但firefox的innerHTML,nodeValue的返回结果和源码一致是有换行符的。
所以，你的问题在firefox下比较好办。
如果在ie下，只能先获取本页的源码了，用ajax下载本页的源码，再做文本分析。
在后台就把内容中手动添加标志，是个不错的方法，添加注释就行了，换行处添加一个不影响页面解析，但可以被innerHTML,outerHTML,nodeValue取到。

diffmaker 2009-11-02

打赏
举报

楼主可以自己运行一下，看一下效果是不是你想要的

diffmaker 2009-11-02

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>无标题页</title>

    <style type="text/css">

        #oldc{

            width:600px;

            border:4px solid red;

        }

        #newc{

            width:600px;

            border:4px solid blue;

        }

    </style>

    <script type="text/javascript">

        window.onload=function(){

            var oldcontent=document.getElementById("oldc").innerHTML;

            var newcontent=oldcontent;

            newcontent=newcontent.replace(/(.+)/g,"<li>$1</li>");

            document.getElementById("newc").innerHTML=newcontent;

        }

    </script>

</head>

<body>

<div id="oldc">

字符串1

字符串2

字符串3

……

字符串N

</div>

<br />

<div id="newc"></div>

</body>

</html>

muhero 2009-11-02

打赏
举报

[Quote=引用 8 楼 microogle 的回复:]
我猜LZ是要加上 <br>标签来实现换行。
[/Quote]

我需要动态将行分出来并添加样式

由于取不到HTML代码中的换行标志，现在只能在内容中手动添加标志

muhero 2009-11-02

打赏
举报

[Quote=引用 6 楼 diffmaker 的回复:]
引用 3 楼 yyz985 的回复:
var s = "字符串1\n字符串2\n字符串3";
alert(s.replace(/(.+)/g, ' <li>$1 </li>'))

人家给你正确答案了，表示什么？在下则表达式中，点号（.）表示换行符以外的字符
[/Quote]

首先s变量中没有"\n"

在你提醒之后特意试了一下，该正则……如下：
<li>
字符串1
字符串2
字符串3
</li>

而非
<li>字符串1 </li>
<li>字符串2 </li>
<li>字符串3</li>

wcwtitxu 2009-11-02

打赏
举报

同样关注下.

ie 下:



<div id="x">

字符串1

字符串2

字符串3

</div>

<script>

alert(x.innerHTML) // 连在一行了  "字符串1 字符串2 字符串3 "

/*

不改 HTML 的情况下,有没有办法,看到:

字符串1

字符串2

字符串3

*/

</script>

BeenZ 2009-11-01

打赏
举报



var s = "字符串1\n字符串2\n字符串3"; 

alert(s.replace(/^(.*)$/img, "<li>$1</li>"))

yyz985 2009-11-01

打赏
举报

var s = "字符串1\n字符串2\n字符串3";
alert(s.replace(/(.+)/g, '<li>$1</li>'))

sohighthesky 2009-11-01

打赏
举报

li标签总要闭合吧，
此功能在ie下好像不好完成，

易语言-易语言过滤HTML,JS,CSS,空格,换行符源码

通过执行JS代码达到过滤效果，支持过滤HTML,JS,CSS,空格,换行符

备注显示将换行符包围的URL转换为嵌入。该代码的重要部分直接取自的出色插件，因此非常感谢 :folded_hands: 安装： yarn add @agentofuser/remark-oembed 用法说我们有以下文件demo.md ： Hey this is a nice youtube video about making modern react apps with gatsby: https://www.youtube.com/watch?v=GN0xHSk2P8Q Check it out :backhand_index_pointing_up: 我们的脚本example.js如下所示： var fs = require ( 'fs' )

本文实例介绍了Python通过正则表达式获取,去除(过滤)或者替换HTML标签的几种方法，具体内容如下 python正则表达式关键内容: python正则表达式转义符: . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 \W 匹配任意不是字母，数字，下划线，汉字的字符 \S 匹配任意不是空白符的字符 \D 匹配任意非数字的字符 \B 匹配不是单词开头或结束的位置 [^x] 匹配除了x以外的任意字符 [^aeiou] 匹配除了aeiou这几个字母以外的任意字符

压缩HTML的起因如何提高网页加载速度，需要怎么对html页面优化相信是每个拟提高建站技术站长曾想到的问题，其实网页优化的方法还是很多。有童鞋询问higrid如何压缩HTML，也就是说能不能把所有的html、js、Css在运行前都压缩成一行，清除注释标记、换行符、空格、制表符等。这样一个直接的好处是减小html页面体积来提高前端加载速度。很多人认为启动gzip，但一般启动gzip都比较少对html启动gzip压缩，因为现在的html都是动态的，不会使用浏览器缓存，而启用gzip的话每次请求都需要压缩，会比较消耗服务器资源，对js,css启动gzip比较好是因为js,css都会使用缓

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章