JavaScript部分功能实现（字符串的处理）

PiscesXu

已于 2022-05-31 11:04:32 修改

阅读量228

点赞数

分类专栏：前端文章标签： javascript

于 2020-04-30 08:11:05 首次发布

本文链接：https://blog.csdn.net/PiscesXu/article/details/105598334

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript小功能

JavaScript部分功能实现-处理字符串

将字符串内的`<title />` 变成`<title></title>`

1.定义一个html字符串

const str = '<?xml version="1.0" encoding="utf-8"?><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" xmlns:epub="http://www.idpf.org/2007/ops"><head><title /><title /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/main.css" /></head><body><h1 id="A15ec0004-9c40-4876-abf9-a89618dd8504" class="title-center">陕西省西安市</h1> <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p></body></html>'
replaceErrorTitle(str)

2.将字符串传入下面的方法，即可将字符串内的<title /> 变成<title></title>。
该方法流程：
①截取字符串内<head>标签内的字符串，
②使用正则的方式，将字符串内的<title /> 变成<title></title>。

function replaceErrorTitle(documentText){

const start = documentText.indexOf('<head>')
const end = documentText.lastIndexOf('</head>')
let documentTexts = [];

documentTexts[0] = documentText.substring(0, start)
documentTexts[1] = documentText.substring(start, end+ '</head>'.length)
documentTexts[2] = documentText.substring(end+'</head>'.length,)
console.log(documentTexts);
documentTexts[1] = documentText[1]? documentTexts[1].replace(new RegExp("<title\\s*/>","g"),"<title></title>") : '';
return  documentTexts.join('');
}

给字符串内的`<p>` 标签添加样式`line-height: 2;`

1.定义一个html字符串

let str = '<?xml version=\'1.0\' encoding=\'utf-8\'?><html xmlns="http://www.w3.org/1999/xhtml"><head><title>语音和语系</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="stylesheet.css" rel="stylesheet" type="text/css" /><link href="page_styles.css" rel="stylesheet" type="text/css" /></head><body class="calibre"><p id="filepos103041" class="calibre_6"><span class="calibre2">第六节　组合</span></p><p id="filepos103143" style="color: red" class="calibre_7"><span class="calibre2"  ><span class="bold">一、音节</span></span></p><p class="calibre_8">音节是语音中最自然的结构单位”/t<sup class="calibre3"><small class="calibre4"><span class="calibre5">h</span></small></sup>a/，“三”/san/，“端”/tuan/等等。</p><p class="calibre_9" style="color: red">这是一段话这是一段话这是一段话。</p><p class="calibre_9">这是第二段话这是第二段话这是第二段话这是第二段话这是第二段话这是第二段话</p></body></html>'
this.addCss(str)

2.将字符串传入下面的方法，即可给字符串内的<p> 标签添加样式line-height: 2;
该方法流程：
①截取字符串内<body>标签内的字符串，
② 按照<p分隔字符串.
③ 每一个截取字符串内第一个的><，
④判断第一个是否有style="，若是没有，直接在字段前面加上style="line-height:2;"；若是存在则继续截取，根据style="截取。然后将style="line-height:2;放在字段前面。
⑤使用join拼接字符串。

function addCss(buffer){
		const start = buffer.indexOf('<body')
		const end = buffer.lastIndexOf('</body>')
		 let documentTexts = [];
		
		 documentTexts[0] = buffer.substring(0, start)
		 documentTexts[1] = buffer.substring(start, end+ '</body>'.length)
		 documentTexts[2] = buffer.substring(end+'</body>'.length,)
		 console.log(51, documentTexts);
		
		 let pList = documentTexts[1].split('<p')
		
		 for(let i = 1; i< pList.length; i++){
			let pStart = pList[i].indexOf('><')
			let s = []
			s[0] = pList[i].substring(0, pStart)
			s[1] = pList[i].substring(pStart,)
			if (s[0].indexOf('style="') !== -1){
			  let u = []
			  let istart = s[0].indexOf('style="')
			  u[0] = s[0].substring(0, istart)
			  u[1] = 'style="line-height:2;' +  s[0].substring(istart + 'style="'.length,)
			  s[0] = u.join('')
			} else {
			  s[0] = 'style="line-height:2;" ' + s[0]
			}
			pList[i] = s.join('')
		 }
		 documentTexts[1] = pList.join('<p ')
		 buffer = documentTexts.join('');
		 return dbuffer;
	}