最近打算做小程序，可是发现小程序没有能力去处理html标签，之前做项目一直都是用vuejs，还可以使用v-text或者v-html去处理显示html标签，可是在小程序中不知道怎么做，比如爬取到的数据：
jQuery tagEditor Pluginbody { 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; }
example tags, sortable, autocomplete, edit in place, tab/cursor navigation, duplicate check, callbacks, copy-paste, placeholder, public methods, custom delimiter, graceful degradation
Overview and Features
Released under the MIT License.
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 caret plugin (1.1 kB minified).
- Lightweight: 8.5 kB of JavaScript - less than 3.2 kB gzipped
- Edit in place tags
- Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC
- Optional jQuery UI sortable
- Optional jQuery UI autocomplete
- Copy-paste or delete multiple selected tags
- Duplicate tags check
- Custom delimiter/s
- Placeholder
- Custom style for faulty tags
- Public methods for reading, adding and removing tags + destroy function
- Callbacks
- Allows tabindex for form navigation
- Graceful degradation if JavaScript is disabled
This plugin was developed by and for Pixabay.com - 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.
Usage
Include the stylesheet jquery.tag-editor.css in the <head> section of your HTML document - and the JavaScript file jquery.tag-editor.min.js after loading jQuery and optional jQuery UI sortable/autocomplete.
Make sure to also load accursoft's caret plugin (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.
$(selector).tagEditor({key1: value1, key2: value2});
// examples
// assign tag editor to textarea - existing text will be used as initial tags
$('textarea').tagEditor();
// assign tag editor to text input with initial tags
$('input[type="text"]').tagEditor({ initialTags: ['tag1', 'tag2', 'tag3'] });
// use jQuery UI autocomplete
$('#my_textarea').tagEditor({ autocomplete: { 'source': '/url/', minLength: 3 } });
Settings
| Property | Default | Description |
|---|---|---|
| initialTags | [] | Initial tags as an array of strings. |
| maxTags | null | Maximum number of allowed tags. |
| maxLength | 50 | maxlength attribute of the tag input field. |
| delimiter | ',;' | Required string of delimiters - characters for separating tags. The first character is used as default delimiter in the (hidden) original field. |
| placeholder | '' | Placeholder text for empty tag editor. |
| forceLowercase | true | Lowercase all tags. |
| removeDuplicates | true | Automatically remove duplicate tags. |
| clickDelete | false | Delete tags on right click and on Ctrl+click. |
| animateDelete | 175 | Animate duration for deletion of tags in milliseconds. Set to 0 for non-animated removal. |
| sortable | true | If jQuery UI sortable is available and this option is set to true, tags are sortable by drag and drop. |
| autocomplete | null | jQuery UI autocomplete options as key/value pairs object. If provided, jQuery UI autocomplete must be loaded additionally. |
| Callbacks | ||
| onChange(field, editor, tags) | Callback that fires after tags are changed. field is the (hidden) original field, editor is the editor's DOM element (an <ul> list of tag elements), and tags contains the list of current tags. | |
| beforeTagSave(field, editor, tags, tag, val) | Callback that fires before a tag is saved. field is the (hidden) original field, editor is the editor's DOM element. tags contains the list of current tags, tag is the value that is about to get overwritten (empty string, unless an existing tag gets changed), and val is the new value to be saved. beforeTagSave() may return a string for overwriting the saved tag. Return false for reverting to the tag's previous value (or to skip this tag value in the case of copy-paste insertion). | |
| beforeTagDelete(field, editor, tags, val) | Callback that fires before a tag is deleted. field is the (hidden) original field, editor is the editor's DOM element. tags contains the list of current tags, val is the tag that is about to get deleted. Return false to prevent this action. | |
| Public Methods | ||
| getTags | Returns a list of objects in the following format:
| |
| addTag(val, blur) | Adds val as a new tag. Set blur to true if focus should not be set automatically into an empty, new tag after this action. | |
| removeTag(val, blur) | Removes val as tag. Set blur to true if focus should not be set automatically into an empty, new tag after this action. | |
| destroy | Removes the tag editor instance an restores visibility of the original text field or textarea. | |
Demos
Basic settings
$('#demo1').tagEditor({
initialTags: ['Hello', 'World', 'Example', 'Tags'],
delimiter: ', ', /* space and comma */
placeholder: 'Enter tags ...'
});
The original field - textarea or text input - is normally hidden automatically. We show it here to make value changes visible:
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.
Autocomplete
For enabling tag autocompletion, make sure to have jQuery UI autocomplete readily loaded.
You can then pass any options that work with UI autocomplete to your tagEditor settings.
$('#demo2').tagEditor({
autocomplete: {
delay: 0, // show suggestions immediately
position: { collision: 'flip' }, // automatic menu position up/down
source: ['ActionScript', 'AppleScript', 'Asp', ... 'Python', 'Ruby']
},
forceLowercase: false,
placeholder: 'Programming languages ...'
});
Public methods
$('#demo3').tagEditor({
initialTags: ['Hello', 'World'],
placeholder: 'Enter tags ...'
});
// actions on button clicks
// getTags
alert( $('#demo3').tagEditor('getTags')[0].tags );
// addTag
$('#demo3').tagEditor('addTag', 'example');
// removeTag
$('#demo3').tagEditor('removeTag', 'example');
// Remove all tags
function() {
var tags = $('#demo3').tagEditor('getTags')[0].tags;
for (i = 0; i < tags.length; i++) { $('#demo3').tagEditor('removeTag', tags[i]); }
}
// working shortcut for removing all tags
// $('#demo3').next('.tag-editor').find('.tag-editor-delete').click();
// destroy
$('#demo3').tagEditor('destroy');
// re-init editor
$('#demo3').tagEditor({ placeholder: 'Enter tags ...' });
Callbacks
$('#demo4').tagEditor({
initialTags: ['Hello', 'World'],
placeholder: 'Enter tags ...',
onChange: function(field, editor, tags) {
$('#response').prepend(
'Tags changed to: ' + (tags.length ? tags.join(', ') : '----') + '<hr>'
);
},
beforeTagSave: function(field, editor, tags, tag, val) {
$('#response').prepend('Tag ' + val + ' saved' + (tag ? ' over ' + tag : '') + '.');
},
beforeTagDelete: function(field, editor, tags, val) {
var q = confirm('Remove tag "' + val + '"?');
if (q) $('#response').prepend('Tag ' + val + ' deleted.');
else $('#response').prepend('Removal of ' + val + ' discarded.');
return q;
}
});
Callback response:
Custom style and clickDelete
Use right mouse click or Ctrl+left click to delete tags.
$('#demo5').tagEditor({
clickDelete: true,
initialTags: [ ... ],
placeholder: 'Enter tags ...'
});
/* overwrite default CSS for tiny, dark tags */
#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; }
This jQuery plugin was designed with custom styling in mind. In this example we've enabled the clickDelete 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.
Custom CSS classes for tags
Using the onChange callback for adding custom CSS classes to specific tags.
$('#demo6').tagEditor({
initialTags: ['custom', 'class', 'red', 'green', 'demo'],
onChange: tag_classes
});
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');
});
}
// first assign tag classes after initializing tagEditor; onChange is not called on init
tag_classes(null, $('#demo6').tagEditor('getTags')[0].editor);
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:
<ul>
<li>
<div class="tag-editor-spacer"></div>
<div class="tag-editor-tag">Tag content</div>
<div class="tag-editor-delete"><i></i></div>
</li>
[...]
</ul>
In the example, we simply add CSS classes to the <li> elements.
This is just an exampe of what the onChange callback may be used for. Inside of it, addTag and removeTag may be called to dynamically change the current list of tags.
Please report any bugs and issues at the GitHub repositiory.
This software is released as Open Source under the MIT License by Simon Steinberger / Pixabay.com.
// 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($("
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, ''+term+''), 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
});
$('#demo4').tagEditor({
initialTags: ['Hello', 'World'],
placeholder: 'Enter tags ...',
onChange: function(field, editor, tags) { $('#response').prepend('Tags changed to: '+(tags.length ? tags.join(', ') : '----')+'
'); },
beforeTagSave: function(field, editor, tags, tag, val) { $('#response').prepend('Tag '+val+' saved'+(tag ? ' over '+tag+'' : '')+'.
'); },
beforeTagDelete: function(field, editor, tags, val) {
var q = confirm('Remove tag "'+val+'"?');
if (q) $('#response').prepend('Tag '+val+' deleted.
');
else $('#response').prepend('Removal of '+val+' discarded.
');
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('\
\
\
');
}
小程序有什么办法能够对这样的数据进行处理
4450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
