Javascript 小功能收集

1. 匹配替换HTML元素，返回纯文本
2. 光标定位到末尾的位置, default:光标都会定位在最开始的位置
3. JS触发事件
   
4. JS按比例缩放图片并显示图片的一部分
   
5. 
   

1.匹配替换HTML元素，返回纯文本

var $plainText = $('#content');//$("#plainText");
$plainText.on('paste', function (e) {  
  window.setTimeout(function () {
    $plainText.html(removeAllTags(replaceStyleAttr($plainText.html()))); 
  }, 0);
});

function replaceStyleAttr(str) {  
  return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
    return b + 'style_replace' + d;
  });
}

function removeTagsExcludeA (str) {  
  return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}

2. 光标定位到末尾的位置, default:光标都会定位在最开始的位置

function placeCaretAtEnd(el) {  
    $(el).focus();
    
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } 
    else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}
function removeAllTags (str) {  
  return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');

}

3. JS触发事件

<input type="hidden" value="" id="data" name="data">

$('#data').change(function(){ console.log('changed')});
$('#data').val(123).trigger('change');

4. JS按比例缩放图片并显示图片的一部分

<div style="width:200px; height: 200px;">
  <img src="default4.jpg" alt="" class="media-object" />
</div>

5. JS触发事件

    //功能: JS触发事件
    function EventTrigger(ele){
        if(typeof ele=='undefined' && typeof ele!='object' ){ return null; }
        if( document.createEvent ){
            var evObj = document.createEvent('MouseEvents');
            /*
            createEvent(eventType)  
            参数: eventType 共5种类型:
                Events: 包括所有的事件.
                HTMLEvents: 包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select','submit', 'unload'. 事件
                UIEevents:  包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
                间接包含 MouseEvents.
                MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.
                MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.
            */
            
            evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
            
            /*
                HTMLEvents和通用Events:initEvent('type', bubbles, cancelable )
                UIEvents:  initUIEvent('type', bubbles, cancelable, windowObject, detail )
                MouseEvents:initMouseEvent('type', bubbles, cancelable, windowObject, detail, screenX, screenY,clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
                MutationEvents:initMutationEvent('type', bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange )
                
            */

            ele.dispatchEvent(evObj);

            /*
                在初始化完成后就可以随时触发需要的事件了, 为大家介绍targetObj.dispatchEvent(event)
                使targetObj对象的event事件触发
                需要注意的是在IE 5.5+版本上请用fireEvent方法, 还是浏览兼容的考虑.
            */

        }
        else{
            ele.fireEvent('onclick');//兼容IE
        }
    }//end function EventTrigger

   //--------------------------------------------
    
    EventTrigger(fireOnThis)