html文本解析标签,javascript – 如何实现在文本中解析自己的html标签

我建议您执行以下实施

http://jsfiddle.net/NwRCm/5/

它使用State设计模式(由于JavaScript和目的很少修改).在表面下,所有状态都使用正则表达式实现,但在我看来,这是最有效的方式.

/* View definition */

function View(container) {

this.container = container;

this._parsers = [];

this._currentState = 0;

};

View.prototype.parse = function(text) {

var self = this;

this._parsers.forEach(function (e) {

self._parse(e);

});

return this.container.innerHTML;

};

View.prototype._parse = function (parser) {

var text = parser.parse(this.container.innerHTML);

this.container.innerHTML = text;

return text;

};

View.prototype.nextState = function () {

if (this._currentState < this._parsers.length) {

return this._parse(this._parsers[this._currentState++]);

}

return null;

};

View.prototype.addParser = function (parser) {

if (parser instanceof Parser) {

return this._parsers.push(parser);

} else {

throw 'The parser you\'re trying to add is not an instance of Parser';

}

};

/* end of the View definition */

/* Simulation of interface */

function Parser() {};

Parser.prototype.parse = function () {

throw 'Not implemented!';

};

/* Implementation of bold parser */

function BoldParser() {};

BoldParser.prototype = new Parser();

BoldParser.prototype.parse = function (text) {

text = text.replace(/\*([^\*]+)\*/g, '$1');

return text;

};

/* Implementation of underline parser */

function UnderlineParser() {};

UnderlineParser.prototype = new Parser();

UnderlineParser.prototype.parse = function (text) {

text = text.replace(/\_([^\_]+)\_/g, '$1');

return text;

};

/* Link parser */

function LinkParser() {};

LinkParser.prototype = new Parser();

LinkParser.prototype.parse = function (text) {

text = text.replace(/\[([^\|].+)\|(.+)\]/g, '$1');

return text;

};

var v = new View(document.getElementById('container'));

v.addParser(new UnderlineParser());

v.addParser(new BoldParser());

v.addParser(new LinkParser());

v.nextState();

v.nextState();

v.nextState();

让我更深入地了解一下实施情况.

首先我们有一个基础“类”(构造函数)视图.每个视图都有它的基本容器和解析器列表,它还记得下一个应该应用哪个解析器.

之后我们有了“抽象类”(构造函数与原型中的方法抛出异常),名为Parser,它定义了一个必须由每个解析器实现的方法解析.

之后我们只定义不同的具体解析器并将它们添加到视图中.我们可以逐个传递状态(View的nextState)或在单个方法调用中传递所有状态(View的解析).我们可以动态添加新的解析器.

可以批准的东西包括用于管理解析器的flyweight工厂.

在实现像Template方法这样的不同模式时,使用“抽象”构造函数的方法也非常有用.

>由于所有这些构造函数和对象的定义,编辑可能会有一点开销.一切都可以通过回调来完成,即每个状态都是不同的功能.我使用这种方法是因为我正在寻找最简单的理解,从语言特定的功能答案清楚.我希望我实现了它.