极客观点
项目管理
HarmonyOS
最近打算做小程序，可是发现小程序没有能力去处理html标签，之前做项目一直都是用vuejs，还可以使用v-text或者v-html去处理显示html标签，可是在小程序中不知道怎么做，比如爬取到的数据：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery tagEditor Plugin</title>
<meta name="description" content="A lightweight and sophisticated tag editor for jQuery. Sortable, editable tags with cursor navigation, autocomplete, and callbacks.">
<link rel="shortcut icon" href="https://pixabay.com/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }
th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }
h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }
@media (max-width:480px) {
h1 { font-size: 3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
td:first-child { white-space: normal; }
}
.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */
/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
.button-sm { font-size: 85%; }
textarea {
width: 100%; height: 29px; padding: .3em .5em; border: 1px solid #ddd; font-size: .9em;
box-sizing: border-box; margin: 0 0 20px;
}
textarea[readonly] { color: #aaa; background: #f7f7f7; }
#response {
margin: 0 0 1.2em; padding: 10px; background: #f3f3f3; color: #777;
font-size: .9em; max-height: 150px; overflow: hidden; overflow-y: auto;
}
#response i { font-style: normal; color: #cf4b25; }
#response hr { margin: 2px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fdfdfd; }
/* overwrite default CSS for tiny, dark tags in demo5 */
#demo5+.tag-editor { background: #fafafa; font-size: 12px; }
#demo5+.tag-editor .tag-editor-tag { color: #fff; background: #555; border-radius: 2px; }
#demo5+.tag-editor .tag-editor-spacer { width: 7px; }
#demo5+.tag-editor .tag-editor-delete { display: none; }
/* color tags */
.tag-editor .red-tag .tag-editor-tag { color: #c65353; background: #ffd7d7; }
.tag-editor .red-tag .tag-editor-delete { background-color: #ffd7d7; }
.tag-editor .green-tag .tag-editor-tag { color: #45872c; background: #e1f3da; }
.tag-editor .green-tag .tag-editor-delete { background-color: #e1f3da; }
</style>
<link rel="stylesheet" href="jquery.tag-editor.css">
</head>
<body>
<div style="max-width:900px;padding:0 10px;margin:40px auto;text-align:center">
<h1>tagEditor</h1>
<h2>A powerful and lightweight tag editor plugin for jQuery.</h2>
<a href="https://github.com/Pixabay/jQuery-tagEditor/archive/master.zip" class="pure-button pure-button-primary button-lg">Download</a>
<a href="https://github.com/Pixabay/jQuery-tagEditor" class="pure-button button-lg">View on GitHub</a>
</div>
<div style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:20px 5px">
<div style="padding :0 7px 0 5px;max-width:900px;margin:auto">
<textarea id="hero-demo">example tags, sortable, autocomplete, edit in place, tab/cursor navigation, duplicate check, callbacks, copy-paste, placeholder, public methods, custom delimiter, graceful degradation</textarea>
</div>
</div>
<div style="max-width:900px;margin:auto;padding:0 10px 50px">
<h3>Overview and Features</h3>
<p>
Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.
Source on <a href="https://github.com/Pixabay/jQuery-tagEditor">Github</a> (<a href="https://github.com/Pixabay/jQuery-tagEditor#changelog">changelog</a>).
Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. IE7 technically works, but no care has gone into CSS/layout bugs.
tagEditor depends on accursoft's <a href="https://github.com/accursoft/caret">caret plugin</a> (1.1 kB minified).
</p>
<ul>
<li>Lightweight: 8.5 kB of JavaScript - less than 3.2 kB gzipped</li>
<li>Edit in place tags</li>
<li>Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC</li>
<li>Optional jQuery UI sortable</li>
<li>Optional jQuery UI autocomplete</li>
<li>Copy-paste or delete multiple selected tags</li>
<li>Duplicate tags check</li>
<li>Custom delimiter/s</li>
<li>Placeholder</li>
<li>Custom style for faulty tags</li>
<li>Public methods for reading, adding and removing tags + destroy function</li>
<li>Callbacks</li>
<li>Allows tabindex for form navigation</li>
<li>Graceful degradation if JavaScript is disabled</li>
</ul>
<p>
This plugin was developed by and for <a href="https://pixabay.com/">Pixabay.com</a> - an international repository for free Public Domain images.
We have implemented this piece of software in production and we share it - in the spirit of Pixabay - freely with others.
</p>
<h3>Usage</h3>
<p>
Include the stylesheet <span class="inline-code">jquery.tag-editor.css</span> in the <span class="inline-code"><head></span> section of your HTML document - and the JavaScript file <span class="inline-code">jquery.tag-editor.min.js</span> after loading jQuery and optional jQuery UI sortable/autocomplete.
Make sure to also load accursoft's <a href="http://code.accursoft.com/caret">caret plugin</a> (1.1 kB minified).
tagEditor accepts settings from an object of key/value pairs, and can be assigned to any text input field or textarea.
</p>
<pre>
$(selector).tagEditor({key1: value1, key2: value2});
<i>// examples</i>
<i>// assign tag editor to textarea - existing text will be used as initial tags</i>
$(<b>'textarea'</b>).tagEditor();
<i>// assign tag editor to text input with initial tags</i>
$(<b>'input[type="text"]'</b>).tagEditor({ initialTags: [<b>'tag1'</b>, <b>'tag2'</b>, <b>'tag3'</b>] });
<i>// use jQuery UI autocomplete</i>
$(<b>'#my_textarea'</b>).tagEditor({ autocomplete: { <b>'source'</b>: <b>'/url/'</b>, minLength: <em>3</em> } });</pre>
<h3>Settings</h3>
<table>
<tr><th>Property</th><th>Default</th><th>Description</th></tr>
<tr><td>initialTags</td><td>[]</td><td>Initial tags as an array of strings.</td></tr>
<tr><td>maxTags</td><td><i>null</i></td><td>Maximum number of allowed tags.</td></tr>
<tr><td>maxLength</td><td>50</td><td><span class="inline-code">maxlength</span> attribute of the tag input field.</td></tr>
<tr>
<td>delimiter</td><td style="white-space:nowrap">',;'</td>
<td>
<p>
Required string of delimiters - characters for separating tags.
The first character is used as default delimiter in the (hidden) original field.
</p>
</td>
</tr>
<tr><td>placeholder</td><td>''</td><td>Placeholder text for empty tag editor.</td></tr>
<tr><td>forceLowercase</td><td><i>true</i></td><td>Lowercase all tags.</td></tr>
<tr><td>removeDuplicates</td><td><i>true</i></td><td>Automatically remove duplicate tags.</td></tr>
<tr><td>clickDelete</td><td><i>false</i></td><td>Delete tags on right click and on Ctrl+click.</td></tr>
<tr><td>animateDelete</td><td><i>175</i></td><td>Animate duration for deletion of tags in milliseconds. Set to 0 for non-animated removal.</td></tr>
<tr><td>sortable</td><td><i>true</i></td><td>If <a href="https://jqueryui.com/sortable/">jQuery UI sortable</a> is available and this option is set to <span class="inline-code">true</span>, tags are sortable by drag and drop.</td></tr>
<tr><td>autocomplete</td><td><i>null</i></td><td><a href="https://jqueryui.com/autocomplete/">jQuery UI autocomplete</a> options as key/value pairs object. If provided, jQuery UI autocomplete must be loaded additionally.</td></tr>
<tr><td colspan="3"> </td></tr>
<tr><th>Callbacks</th><th colspan="2"></th></tr>
<tr><td>onChange(field, editor, tags)</td><td colspan="2">Callback that fires after tags are changed. <span class="inline-code">field</span> is the (hidden) original field, <span class="inline-code">editor</span> is the editor's DOM element (an <ul> list of tag elements), and <span class="inline-code">tags</span> contains the list of current tags.</td></tr>
<tr><td>beforeTagSave(field, editor, tags, tag, val)</td><td colspan="2">Callback that fires before a tag is saved. <span class="inline-code">field</span> is the (hidden) original field, <span class="inline-code">editor</span> is the editor's DOM element. <span class="inline-code">tags</span> contains the list of current tags, <span class="inline-code">tag</span> is the value that is about to get overwritten (empty string, unless an existing tag gets changed), and <span class="inline-code">val</span> is the new value to be saved. <span class="inline-code">beforeTagSave()</span> may return a string for overwriting the saved tag. Return <span class="inline-code">false</span> for reverting to the tag's previous value (or to skip this tag value in the case of copy-paste insertion).</td></tr>
<tr><td>beforeTagDelete(field, editor, tags, val)</td><td colspan="2">Callback that fires before a tag is deleted. <span class="inline-code">field</span> is the (hidden) original field, <span class="inline-code">editor</span> is the editor's DOM element. <span class="inline-code">tags</span> contains the list of current tags, <span class="inline-code">val</span> is the tag that is about to get deleted. Return <span class="inline-code">false</span> to prevent this action.</td></tr>
<tr><td colspan="3"> </td></tr>
<tr><th>Public Methods</th><th colspan="2"></th></tr>
<tr><td>getTags</td><td colspan="2">
Returns a list of objects in the following format:
<br>[{ field: <i>selected input/textarea</i>, editor: <i>editor instance for field</i>, tags: <i>current tags</i> }]
</td></tr>
<tr><td>addTag(val, blur)</td><td colspan="2">Adds <span class="inline-code">val</span> as a new tag. Set <span class="inline-code">blur</span> to <span class="inline-code">true</span> if focus should not be set automatically into an empty, new tag after this action.</td></tr>
<tr><td>removeTag(val, blur)</td><td colspan="2">Removes <span class="inline-code">val</span> as tag. Set <span class="inline-code">blur</span> to <span class="inline-code">true</span> if focus should not be set automatically into an empty, new tag after this action.</td></tr>
<tr><td>destroy</td><td colspan="2">Removes the tag editor instance an restores visibility of the original text field or textarea.</td></tr>
</table>
<h3 style="margin-top:.8em;border-top:1px solid #eee;padding-top:1.8em">Demos</h3>
<h4 style="margin-top:.5em">Basic settings</h4>
<pre>
$(<b>'#demo1'</b>).tagEditor({
initialTags: [<b>'Hello'</b>, <b>'World'</b>, <b>'Example'</b>, <b>'Tags'</b>],
delimiter: <b>', '</b>, <i>/* space and comma */</i>
placeholder: <b>'Enter tags ...'</b>
});</pre>
<div style="margin:0 0 1.2em">
<p>The original field - textarea or text input - is normally hidden automatically. We show it here to make value changes visible:</p>
<textarea id="demo1"></textarea>
</div>
<p>
The placeholder is visible when all tags are deleted and the editor looses focus.
jQuery UI is already loaded on this page - and by default, tags are then sortable via drag and drop.
</p>
<h4>Autocomplete</h4>
<p>
For enabling tag autocompletion, make sure to have <a href="https://jqueryui.com/autocomplete/">jQuery UI autocomplete</a> readily loaded.
You can then pass <i>any</i> options that work with UI autocomplete to your tagEditor settings.
</p>
<pre>
$(<b>'#demo2'</b>).tagEditor({
autocomplete: {
delay: 0, <i>// show suggestions immediately</i>
position: { collision: 'flip' }, <i>// automatic menu position up/down</i>
source: [<b>'ActionScript'</b>, <b>'AppleScript'</b>, <b>'Asp'</b>, ... <b>'Python'</b>, <b>'Ruby'</b>]
},
forceLowercase: <em>false</em>,
placeholder: <b>'Programming languages ...'</b>
});</pre>
<div style="margin:0 0 1.2em"><textarea id="demo2"></textarea></div>
<h4>Public methods</h4>
<pre>
$(<b>'#demo3'</b>).tagEditor({
initialTags: [<b>'Hello'</b>, <b>'World'</b>],
placeholder: <b>'Enter tags ...'</b>
});</pre>
<div style="margin:0 0 1.2em"><textarea id="demo3"></textarea></div>
<p>
<span onclick="alert($('#demo3').tagEditor('getTags')[0].tags);" class="ed_on pure-button button-sm">getTags</span>
<span onclick="$('#demo3').tagEditor('addTag', 'example');" class="ed_on pure-button button-sm">addTag 'example'</span>
<span onclick="$('#demo3').tagEditor('removeTag', 'example', true);" class="ed_on pure-button button-sm">removeTag 'example'</span>
<span id="remove_all_tags" class="ed_on pure-button button-sm">Remove all tags</span>
<span onclick="$('#demo3').tagEditor('destroy');$('.ed_on').hide();$('.ed_off').show();" class="ed_on pure-button button-sm">destroy</span>
<span onclick="$('#demo3').tagEditor({ placeholder: 'Enter tags ...' });$('.ed_off').hide();$('.ed_on').show();" class="ed_off pure-button button-sm" style="display:none">Init editor</span>
</p>
<pre>
<i>// actions on button clicks</i>
<i>// getTags</i>
alert( $(<b>'#demo3'</b>).tagEditor(<b>'getTags'</b>)[0].tags );
<i>// addTag</i>
$(<b>'#demo3'</b>).tagEditor(<b>'addTag'</b>, <b>'example'</b>);
<i>// removeTag</i>
$(<b>'#demo3'</b>).tagEditor(<b>'removeTag'</b>, <b>'example'</b>);
<i>// Remove all tags</i>
function() {
var tags = $(<b>'#demo3'</b>).tagEditor(<b>'getTags'</b>)[0].tags;
for (i = 0; i < tags.length; i++) { $(<b>'#demo3'</b>).tagEditor(<b>'removeTag'</b>, tags[i]); }
}
<i>// working shortcut for removing all tags
// $('#demo3').next('.tag-editor').find('.tag-editor-delete').click();</i>
<i>// destroy</i>
$(<b>'#demo3'</b>).tagEditor(<b>'destroy'</b>);
<i>// re-init editor</i>
$(<b>'#demo3'</b>).tagEditor({ placeholder: <b>'Enter tags ...'</b> });</pre>
<h4>Callbacks</h4>
<pre>
$(<b>'#demo4'</b>).tagEditor({
initialTags: [<b>'Hello'</b>, <b>'World'</b>],
placeholder: <b>'Enter tags ...'</b>,
onChange: function(field, editor, tags) {
$(<b>'#response'</b>).prepend(
<b>'Tags changed to: '</b> + (tags.length ? tags.join(<b>', '</b>) : <b>'----'</b>) + <b>'<hr>'</b>
);
},
beforeTagSave: function(field, editor, tags, tag, val) {
$(<b>'#response'</b>).prepend(<b>'Tag '</b> + val + <b>' saved'</b> + (tag ? <b>' over '</b> + tag : <b>''</b>) + <b>'.'</b>);
},
beforeTagDelete: function(field, editor, tags, val) {
var q = confirm(<b>'Remove tag "'</b> + val + <b>'"?'</b>);
if (q) $(<b>'#response'</b>).prepend(<b>'Tag '</b> + val + <b>' deleted.'</b>);
else $(<b>'#response'</b>).prepend(<b>'Removal of '</b> + val + <b>' discarded.'</b>);
return q;
}
});</pre>
<div style="margin:0 0 1.2em"><textarea id="demo4"></textarea></div>
<p style="font-size:.9em;margin:0 0 .2em">Callback response:</p>
<div id="response">Starting tags: <i>hello, world</i></div>
<h4>Custom style and clickDelete</h4>
<p>
Use right mouse click or Ctrl+left click to delete tags.
</p>
<pre>
$(<b>'#demo5'</b>).tagEditor({
clickDelete: true,
initialTags: [ ... ],
placeholder: <b>'Enter tags ...'</b>
});</pre>
<div style="margin:0 0 1.2em"><textarea id="demo5"></textarea></div>
<pre>
<i>/* overwrite default CSS for tiny, dark tags */</i>
<b>#demo5+.tag-editor</b> { background: <em>#fafafa</em>; font-size: <em>12px</em>; }
<b>#demo5+.tag-editor .tag-editor-tag</b> {
color: <em>#fff</em>; background: <em>#555</em>;
border-radius: <em>2px</em>;
}
<b>#demo5+.tag-editor .tag-editor-spacer</b> { width: <em>7px</em>; }
<b>#demo5+.tag-editor .tag-editor-delete</b> { display: <em>none</em>; }</pre>
<p>
This jQuery plugin was designed with custom styling in mind. In this example we've enabled the <span class="inline-code">clickDelete</span> feature while hiding all delete icons. Both options may be used at the same time, as well.
By fiddling around with the default stylesheet, you can achieve almost any desired look for your tag Editor.
Comments inside the CSS file will help you understand what rule controls which object inside the editor.
</p>
<h4>Custom CSS classes for tags</h4>
<p>
Using the onChange callback for adding custom CSS classes to specific tags.
</p>
<pre>
$(<b>'#demo6'</b>).tagEditor({
initialTags: [<b>'custom'</b>, <b>'class'</b>, <b>'red'</b>, <b>'green'</b>, <b>'demo'</b>],
onChange: tag_classes
});
function tag_classes(field, editor, tags) {
$(<b>'li'</b>, editor).each(function(){
var li = $(this);
if (li.find(<b>'.tag-editor-tag'</b>).html() == <b>'red'</b>) li.addClass(<b>'red-tag'</b>);
else if (li.find(<b>'.tag-editor-tag'</b>).html() == <b>'green'</b>) li.addClass(<b>'green-tag'</b>)
else li.removeClass(<b>'red-tag green-tag'</b>);
});
}
<i>// first assign tag classes after initializing tagEditor; onChange is not called on init</i>
tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor);</pre>
<div style="margin:0 0 1.2em"><textarea id="demo6"></textarea></div>
<p>
In the onChange callback we iterate over all tags and assign custom CSS classes where appropriate.
The DOM structure of the editor looks like this:
</p>
<pre><ul>
<li>
<div class=<b>"tag-editor-spacer"</b>></div>
<div class=<b>"tag-editor-tag"</b>>Tag content</div>
<div class=<b>"tag-editor-delete"</b>><i></i></div>
</li>
[...]
</ul></pre>
<p>
In the example, we simply add CSS classes to the <span class="inline-code"><li></span> elements.
This is just an exampe of what the onChange callback may be used for. Inside of it, <span class="inline-code">addTag</span> and <span class="inline-code">removeTag</span> may be called to dynamically change the current list of tags.
</p>
<div style="margin:40px 0;overflow:hidden">
<span id="github_social"></span>
<div style="float:left;margin-right:35px">
<a href="#" data-width="70" class="twitter-share-button" data-text="jQuery tagEditor Plugin"></a>
</div>
<div style="float:left">
<div class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;width:140px" class="fb-like" data-send="false" data-layout="button_count" data-width="140" data-show-faces="false"></div>
</div>
<p style="border-top:1px solid #eee;padding-top:30px">Please report any bugs and issues at the <a href="https://github.com/Pixabay/jQuery-tagEditor">GitHub repositiory</a>.</p>
<p>This software is released as Open Source under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> by <a href="https://pixabay.com/users/Simon/">Simon Steinberger / Pixabay.com</a>.</p>
</div>
<div style="background:#fafafa;border-top:1px solid #eee;padding:15px;font-size:.9em">
<div style="max-width:900px;margin:auto;padding:0 10px">
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/service/about/">About Us</a>
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/blog/">Blog</a>
<a style="float:right;margin-left:20px" href="https://goodies.pixabay.com/">More Goodies</a>
© <a href="https://pixabay.com/">Pixabay.com</a> / Simon Steinberger / Hans Braxmeier
</div>
</div>
<div id="fb-root"></div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="jquery.caret.min.js"></script>
<script src="jquery.tag-editor.js"></script>
<script>
// jQuery UI autocomplete extension - suggest labels may contain HTML tags
// github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js
(function($){var proto=$.ui.autocomplete.prototype,initSource=proto._initSource;function filter(array,term){var matcher=new RegExp($.ui.autocomplete.escapeRegex(term),"i");return $.grep(array,function(value){return matcher.test($("<div>").html(value.label||value.value||value).text());});}$.extend(proto,{_initSource:function(){if(this.options.html&&$.isArray(this.options.source)){this.source=function(request,response){response(filter(this.options.source,request.term));};}else{initSource.call(this);}},_renderItem:function(ul,item){return $("<li></li>").data("item.autocomplete",item).append($("<a></a>")[this.options.html?"html":"text"](item.label)).appendTo(ul);}});})(jQuery);
var cache = {};
function googleSuggest(request, response) {
var term = request.term;
if (term in cache) { response(cache[term]); return; }
$.ajax({
url: 'https://query.yahooapis.com/v1/public/yql',
dataType: 'JSONP',
data: { format: 'json', q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q='+term+'"' },
success: function(data) {
var suggestions = [];
try { var results = data.query.results.toplevel.CompleteSuggestion; } catch(e) { var results = []; }
$.each(results, function() {
try {
var s = this.suggestion.data.toLowerCase();
suggestions.push({label: s.replace(term, '<b>'+term+'</b>'), value: s});
} catch(e){}
});
cache[term] = suggestions;
response(suggestions);
}
});
}
$(function() {
$('#hero-demo').tagEditor({
placeholder: 'Enter tags ...',
autocomplete: { source: googleSuggest, minLength: 3, delay: 250, html: true, position: { collision: 'flip' } }
});
$('#demo1').tagEditor({ initialTags: ['Hello', 'World', 'Example', 'Tags'], delimiter: ', ', placeholder: 'Enter tags ...' }).css('display', 'block').attr('readonly', true);
$('#demo2').tagEditor({
autocomplete: { delay: 0, position: { collision: 'flip' }, source: ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'] },
forceLowercase: false,
placeholder: 'Programming languages ...'
});
$('#demo3').tagEditor({ initialTags: ['Hello', 'World'], placeholder: 'Enter tags ...' });
$('#remove_all_tags').click(function() {
var tags = $('#demo3').tagEditor('getTags')[0].tags;
for (i=0;i<tags.length;i++){ $('#demo3').tagEditor('removeTag', tags[i]); }
});
$('#demo4').tagEditor({
initialTags: ['Hello', 'World'],
placeholder: 'Enter tags ...',
onChange: function(field, editor, tags) { $('#response').prepend('Tags changed to: <i>'+(tags.length ? tags.join(', ') : '----')+'</i><hr>'); },
beforeTagSave: function(field, editor, tags, tag, val) { $('#response').prepend('Tag <i>'+val+'</i> saved'+(tag ? ' over <i>'+tag+'</i>' : '')+'.<hr>'); },
beforeTagDelete: function(field, editor, tags, val) {
var q = confirm('Remove tag "'+val+'"?');
if (q) $('#response').prepend('Tag <i>'+val+'</i> deleted.<hr>');
else $('#response').prepend('Removal of <i>'+val+'</i> discarded.<hr>');
return q;
}
});
$('#demo5').tagEditor({ clickDelete: true, initialTags: ['custom style', 'dark tags', 'delete on click', 'no delete icon', 'hello', 'world'], placeholder: 'Enter tags ...' });
function tag_classes(field, editor, tags) {
$('li', editor).each(function(){
var li = $(this);
if (li.find('.tag-editor-tag').html() == 'red') li.addClass('red-tag');
else if (li.find('.tag-editor-tag').html() == 'green') li.addClass('green-tag')
else li.removeClass('red-tag green-tag');
});
}
$('#demo6').tagEditor({ initialTags: ['custom', 'class', 'red', 'green', 'demo'], onChange: tag_classes });
tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor); // or editor == $('#demo6').next()
});
if (~window.location.href.indexOf('http')) {
(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=114593902037957";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
$('#github_social').html('\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-tagEditor&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-tagEditor&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
');
}
</script>
</body>
</html>
小程序有什么办法能够对这样的数据进行处理
html5
首先，你爬出来的数据除了html 还存在 css/js ，这些你也想处理？ 这是不现实的。
如果你只是为了在小程序中显示这个页面的话，可以试一下 https://github.com/icindy/wxP...
weparse也不是完全能够显示的
另外，你这完全就是把别人的页面源代码copy下来了吧。